Skeleton Loading Animation CSS

HTML
<div class="card">
    <div class="thumbnail"></div>
    <h1></h1>
    <p></p>
</div>
CSS
*,
*:before,
*:after{
    padding:0;
    margin:0;
    box-sizing:border-box;
}
body{
    background-color:#5050fe;
}
.card{
    height:200px;
    width:500px;
    background-color:#ffffff;
    position:absolute;
    transform:translate(-50%,-50%);
    top:50%;
    left:50%;
    border-radius:8px;
    box-shadow:0 15px 25px rgba(0,0,0,0.2);
    padding:20px 30px;
}
.thumbnail{
    position:relative;
    float:left;
    height:100%;
    width:36%;
    background-color:#e5e5e5;
    border-radius:50%;
}
h1{
    background-color:#e5e5e5;
    width:40%;
    height:30px;
    float:right;
    margin:5px 65px 0 0;
}
p{
    background-color:#e5e5e5;
    width:55%;
    height:95px;
    float:right;
    margin-top:20px;
}
.card *{
    background:linear-gradient(
        120deg,
        #e5e5e5 30%,
        #f0f0f0 38%,
        #f0f0f0 40%,
        #e5e5e5 48%
    );
    background-size:200% 100%;
    background-position:100% 0;
    animation:load 2s infinite;
}
@keyframes load{
    100%{
        background-position:-100%;
    }
}

/* All credits to: https://www.youtube.com/watch?v=-GlIQe7rnQM */

Autor: Compositu

Publicado: 26/03/2023

Compartir Elemento Web

Donar a Compositu
Otras formas de ayudar
  • Compártelo en tus redes sociales.
  • Recomienda los elementos.
  • Regístrate Aquí
  • Deja tu comentario agradeciendo el aporte.

Descarga el código completo del Elemento Web y archivos necesarios (imágenes, librerias, plugins, frameword, etc)

Deja tu comentario