[AUTOMATIQUE] Cet article a plus de 5 ans.
Il se peut donc que les informations qu'il fournit ne soient plus totalement exactes.

En cherchant un « loader » léger à base de CSS et non de GIF comme on le faisait dans les années 90, je me suis rendu compte qu’il n’y avais pas grand chose. A part quelques developpeurs qui proposent des scripts à base de canvas et qui nécessitent des fichiers javascript tiers, je n’ai pas trouvé mon bonheur. Enfin bref, ça c’était avant (comme dirait Krys) que je ne tombe sur une superbe collection disponible sur Codepen.

Pour ceux qui ne connaissent pas ce site, c’est une sorte de bac à sable où des devs/webdesigners/geeks s’amusent et innovent autour du CSS, du JS et su HTML. On trouve donc de tout, des démos de scripts, des forks de plugins, des « tests », des prototypes, et évidemment des choses fonctionnelles ! Voici le lien de cette collection réalisée par Tim Holman : Loaders and Spinners Pour vous donner un ordre d’idée de la taille de la collection (je suis allez jusqu’au bout), il y a 51 pages avec 6 éléments par page, soit 300 loaders et spinners disponibles. Vous devriez donc trouver votre bohneur. Notez que le collection est toujours active, et donc que ce nombre devrait encore augmenter.

Voici une petite sélection rapide pour vous donner un aperçu rapide :

See the Pen Exploring Bourbon by Colin Hall-Coates (@Oka) on CodePen.

See the Pen Material Design Spinner by Fran Pérez (@mrrocks) on CodePen.

See the Pen Circle Illusion Loader by Jack Rugile (@jackrugile) on CodePen.

See the Pen CSS3 Loading Spinner by Matthew Roelle (@Mattykins) on CodePen.

See the Pen Concentric Spheres Loader by Marc Malignan (@MarcMalignan) on CodePen.

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

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