Une animation de chargement en CSS3

| Red Team Design | Bovino |

Traducteur

Bovino

En jouant à DIRT 3, j'ai remarqué que l'interface utilisateur utilisait un triangle animé qui m'a beaucoup plu. Je me suis tout de suite demandé comment réaliser une version similaire en CSS3.

Dans cet article, je vais donc vous montrer comment créer une animation de chargement expérimentale en CSS3.

Cet article est la traduction de CSS3 loading animation experiment, publié sur Red Team Design.

Commentez

- Titre : Une animation de chargement en CSS3

- Auteurs : Red Team Design, Bovino

- Traducteur : Bovino

- Parution : 30 mars 2012

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2012 Catalin Rosu. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Présentation

- Le HTML

- Le CSS

- Conclusion et remerciements

Présentation

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.

Voir un exemple en ligne

Le HTML

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>

Le CSS

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

Conclusion et remerciements

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.