Dans cet article
Découvrons ensemble comment réaliser un effet de chargement sur nos éléments lors d'un appel AJAX par exemple !
1ère étape
Commençons par notre code HTML.
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>
2ème étape
Occupons-nous de la classe card et la balise img.
CSS
.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;
}
3ème étape
Au tour de la hauteur de nos éléments !
CSS
.card .content {
padding: 20px 30px;
}
.card p {
min-height: 70px;
}Ces dimensions vont nous permettre de garder un ratio propre sur toutes nos cartes.
4ème étape
Définissons le style de nos éléments en chargement.
CSS
.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.
5ème étape
Définissons les hauteurs des éléments lors du chargement pour conserver un aspect homogène.
CSS
.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;
}
6ème étape
Créons désormais notre animation.
CSS
@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.
Catégorie : Développeurs
