Une animation de chargement en CSS3

Dans cet exemple, je vais utiliser deux animations CSS3. La première pour les fondus de couleur des triangles, la seconde pour la rotation de l'ensemble. Ces deux animations synchronisées vont permettre de créer un effet assez plaisant.

Au départ, j'ai voulu utiliser les pseudoéléments afin d'avoir besoin de moins de balises. Le problème, c'est que l'ensemble généré ne peut actuellement être animé qu'avec Firefox.

Voici à quoi ressemble le balisage :

<div class="loading-wrap">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
  <div class="triangle3"></div>
</div>

Il y a plusieurs choses importantes à prendre en compte.

• Pour que l'effet de fondu soit agréable et homogène sur les trois triangles, il faut appliquer des valeurs différentes pour l'option animation-delay.
• Notez le vide entre 20 % et 100 % pour l'animation rotation. Cela permet d'avoir un point d'arrêt dans l'animation.
• Dans l'exemple, seule la propriété @keyframes est renseignée, pour une implémentation réelle, vous devrez utiliser les versions préfixées (voir le code de l'exemple).

.loading-wrap {
  width: 60px; height: 60px;
  position: absolute;
  top: 50%; left: 50%;
  margin: -30px 0 0 -30px;
  background: #777;
  animation: rotation ease-in-out 2s infinite;
  border-radius: 30px;
}

.triangle1, .triangle2, .triangle3 {
  border-width: 0 20px 30px 20px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #67cbf0;
  height: 0; width: 0;
  position: absolute;
  left: 10px; top: -10px;
  animation: fadecolor 2s 1s infinite;
}

.triangle2, .triangle3 {
  content: '';
  top: 20px; left: 30px;
  animation-delay: 1.1s;
}

.triangle3 {
  left: -10px;
  animation-delay: 1.2s;
}

@keyframes rotation {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}

@keyframes fadecolor {
    0% {border-bottom-color: #eee;}
    100%{border-bottom-color: #67cbf0;}
}

Voir un exemple en ligne

Souvenez-vous que cette animation est présentée à titre expérimental. Pour l'instant, je pense qu'un GIF animé sera une meilleure solution dans la plupart des cas.

D'autre part, cet exemple n'est pas le meilleur pour vous convaincre d'utiliser CSS3 à la place des images pour limiter le nombre de requêtes HTTP. Le support insuffisant des animations CSS3 par les navigateurs ne permet pas à cette technique d'être satisfaisante actuellement. Cependant, j'espère que vous aurez trouvé cet exemple utile et qu'il vous inspirera pour vos futurs développements.

Si cet article vous a plu, n'hésitez pas à me le dire en laissant un commentaire !

Cet article a été publié avec l'aimable autorisation de Catalin Rosu. L'article original peut être lu sur le site de Red Team Design : CSS3 loading animation experiment.

Nous tenons aussi à remercier ClaudeLELOUP pour sa relecture attentive de cet article.