Las pantallas de esqueleto se utilizan para indicar que el contenido se está cargando. También se les llama pantallas de bienvenida. Esto es parte de la tendencia del diseño moderno. Las pantallas de esqueleto son mejores que los giradores de carga en algunos casos. Es utilizado por muchas grandes empresas como Facebook, Google, etc.
Código HTML: en esta sección, crearemos una estructura básica del esqueleto de la pantalla de la página de carga. Para crear un esqueleto de página de carga, necesitamos usar el elemento <div> donde mostraremos el contenido. Agregaremos una loadingclase a cada elemento dentro de la tarjeta que eliminaremos cuando se cargue el contenido.
<!DOCTYPE html> <html> <head> <title> How to Create Skeleton Screen Loading Effect using CSS? </title> </head> <body> <div class="card"> <div class="card__image loading"></div> <div class="card__title loading"></div> <div class="card__description loading"></div> </div> </body> </html>
Código CSS: en esta sección, usaremos algunas propiedades CSS para crear un esqueleto de pantalla de página de carga.
<style>
/* Card styles */
.card{
background-color: #fff;
height: auto;
width: auto;
overflow: hidden;
margin: 12px;
border-radius: 5px;
box-shadow: 9px 17px 45px -29px
rgba(0, 0, 0, 0.44);
}
/* Card image loading */
.card__image img {
width: 100%;
height: 100%;
}
.card__image.loading {
height: 300px;
width: 400px;
}
/* Card title */
.card__title {
padding: 8px;
font-size: 22px;
font-weight: 700;
}
.card__title.loading {
height: 1rem;
width: 50%;
margin: 1rem;
border-radius: 3px;
}
/* Card description */
.card__description {
padding: 8px;
font-size: 16px;
}
.card__description.loading {
height: 3rem;
margin: 1rem;
border-radius: 3px;
}
/* The loading Class */
.loading {
position: relative;
background-color: #e2e2e2;
}
/* The moving element */
.loading::after {
display: block;
content: "";
position: absolute;
width: 100%;
height: 100%;
transform: translateX(-100%);
background: -webkit-gradient(linear, left top,
right top, from(transparent),
color-stop(rgba(255, 255, 255, 0.2)),
to(transparent));
background: linear-gradient(90deg, transparent,
rgba(255, 255, 255, 0.2), transparent);
/* Adding animation */
animation: loading 0.8s infinite;
}
/* Loading Animation */
@keyframes loading {
100% {
transform: translateX(100%);
}
}
</style>
Nota: La loading clase tiene un pseudoelemento que se mueve de izquierda a derecha para imitar la animación.
Código JavaScript: ahora, cuando se carga el contenido, podemos eliminar la loadingclase de cada elemento y agregar el contenido en el lugar apropiado.
<script>
const title = document.querySelector(".card__title");
const description = document.querySelector(".card__description");
const image = document.querySelector(".card__image");
// Remove the 'loading' class
title.classList.remove("loading");
description.classList.remove("loading");
image.classList.remove("loading");
// Add the content
title.textContent = 'Title';
description.textContent = 'This is the description.';
image.innerHTML = `<img src="${image-source}`;
</script>
Código completo: en esta sección, combinaremos las dos secciones anteriores (código HTML y CSS) para crear el efecto de carga de pantalla de esqueleto. Si se agrega código JavaScript, el esqueleto se reemplaza por los datos.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to Create Skeleton Screen
Loading Effect using CSS?
</title>
<style>
/* Card styles */
.card{
background-color: #fff;
height: auto;
width: auto;
overflow: hidden;
margin: 12px;
border-radius: 5px;
box-shadow: 9px 17px 45px -29px
rgba(0, 0, 0, 0.44);
}
/* Card image loading */
.card__image img {
width: 100%;
height: 100%;
}
.card__image.loading {
height: 300px;
width: 400px;
}
/* Card title */
.card__title {
padding: 8px;
font-size: 22px;
font-weight: 700;
}
.card__title.loading {
height: 1rem;
width: 50%;
margin: 1rem;
border-radius: 3px;
}
/* Card description */
.card__description {
padding: 8px;
font-size: 16px;
}
.card__description.loading {
height: 3rem;
margin: 1rem;
border-radius: 3px;
}
/* The loading Class */
.loading {
position: relative;
background-color: #e2e2e2;
}
/* The moving element */
.loading::after {
display: block;
content: "";
position: absolute;
width: 100%;
height: 100%;
transform: translateX(-100%);
background: -webkit-gradient(linear, left top,
right top, from(transparent),
color-stop(rgba(255, 255, 255, 0.2)),
to(transparent));
background: linear-gradient(90deg, transparent,
rgba(255, 255, 255, 0.2), transparent);
/* Adding animation */
animation: loading 0.8s infinite;
}
/* Loading Animation */
@keyframes loading {
100% {
transform: translateX(100%);
}
}
</style>
</head>
<body>
<div class="card">
<div class="card__image loading"></div>
<div class="card__title loading"></div>
<div class="card__description loading"></div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por frikishaan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA