Ajouter un effet de “chargement” pendant un appel AJAX

Découvrons ensemble comment réaliser un effet de chargement sur nos éléments lors d'un appel AJAX par exemple !

Louis-Nicolas Leuillet

Mis à jour le 3 décembre 2024

Ajouter un effet de “chargement” pendant un appel AJAX

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éveloppement