Un loader SVG avec des animations CSS3

Le format SVG (Scalable Vector Graphic) est un format de données basé sur le XML et qui permet de construire des graphiques vectoriels. Il peut également être animé. Ceci peut donc permettre de construire un loader qui apparaîtra au chargement d’une page ou d’une ressource aJax.

Le format graphique vectoriel SVG
Le format graphique vectoriel SVG

Les animations dans les fichiers SVG étaient décrites encore récemment par des animations SMIL (Synchronized Multimedia Integration Language) telles que <animate>, <set>. Mais avec l’avènement des animations CSS3, celles-ci deviennent dépréciées.

Voici ce que l’on peut lire dans la console Chrome lorsqu’une animation SMIL est définie : SVG’s SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

Voici donc la construction d’un loader SVG classique utilisant les animations CSS3 dont le résultat sera celui-là :

Pour cela, on crée douze rectangles aux bords arrondis que l’on place pour former la figure et que l’on anime.

On affecte deux classes à chaque élément, l’une spinner qui animera les éléments avec un effet sur l’opacité et l’autre spinnerNx qui placera les rectangles et déclenchera l’animation à différents moments régulièrement espacés.

On peut définir le style à l’intérieur du fichier SVG, ou dans une section qui précède l’utilisation du loader.

Une fois minifié, le fichier SVG donne :

La taille du loader est 72 × 72 pixels. Celui-ci peut-être aussi dimensionné avec le CSS.

Et hop, un joli loader qui utilise le CSS3.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *