Découvrons ensemble comment réaliser un effet de chargement sur nos éléments lors d'un appel AJAX par exemple !
Commençons par notre code HTML.
<div class="card">
<div class="image">
<img src="https://cdn.pixabay.com/photo/2021/01/21/16/17/english-cocker-spaniel-5937757_960_720.jpg" />
</div>
<div class="content">
<h2>Protection animale</h2>
<p>Découvrez comment agir pour la protection des animaux.</p>
</div>
</div>
<div class="card is-loading">
<div class="image"></div>
<div class="content">
<h2></h2>
<p></p>
</div>
</div>
Occupons-nous de la classe card et la balise img.
.card {
margin: 10px;
width: 300px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.card .image img {
max-width: 100%;
border-radius: 5px 5px 0 0;
}
Au tour de la hauteur de nos éléments !
.card .content {
padding: 20px 30px;
}
.card p {
min-height: 70px;
}
Ces dimensions vont nous permettre de garder un ratio propre sur toutes nos cartes.
Définissons le style de nos éléments en chargement.
.card.is-loading .image,
.card.is-loading h2,
.card.is-loading p {
background: #eee;
background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
border-radius: 5px;
background-size: 200% 100%;
animation: 1.5s shine linear infinite;
}
Nous allons créer un dégradé. L’objectif est de le faire bouger pour donner cette illusion que la carte est en train de charger.
Définissons les hauteurs des éléments lors du chargement pour conserver un aspect homogène.
.card.is-loading .image {
height: 200px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card.is-loading h2 {
height: 30px;
}
.card.is-loading p {
height: 70px;
}
Créons désormais notre animation.
@keyframes shine {
to {
background-position-x: -200%;
}
}
C’est le mouvement du background qui va nous permettre de donner l’illusion que la carte est en chargement.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.