LOADING : Une bibliotheque de spinners React
⏱️ Temps de lecture estimé : 2 minutes
📌 LOADING est une bibliothèque React qui rassemble une trentaine d’indicateurs de chargement animés, dessinés avec un soin qu’on croise rarement dans ce coin de l’interface.
Il y a un composant que tout le monde copie-colle sans le regarder : le spinner. Trois points qui rebondissent, un arc qui tourne, sortis d’un vieux tutoriel. Loading part du principe inverse : l’attente fait partie de l’expérience, et l’indicateur qui la meuble mérite autant d’attention que le reste de la page.
L’installation tient en une ligne, npm install loading-dev. L’usage en tient en une autre : on importe Arc, Blocks ou Wave, puis on pose size, color et duration. Les plus pointilleux ajoutent easing, cap ou des réglages qui leur sont propres. Une prop playState met l’animation en pause, et vos styles CSS restent utilisables par-dessus.
Le catalogue est le vrai plaisir. Une trentaine de variantes : le Classic à douze barres radiales, le Morph qui arrondit un carré en cercle pendant qu’il tourne, Eclipse où deux points s’échangent, ou Snake dont l’arc s’étire en tournant. Chacune a sa page sur le site, avec aperçu en direct et réglages à manipuler. Je trouve l’approche très juste : une animation d’attente se choisit à l’œil, pas en lisant une API.
Deux détails qui comptent : les spinners respectent prefers-reduced-motion sans configuration, et la licence est MIT. Les auteurs, Jakub Krehel et Paul Faivret, publient le code sur un GitHub public et documentent chaque composant, avec même un llms.txt pour les outils IA.
Côté limites, soyons clairs. Il faut React 19 ou plus, et rien d’autre n’est prévu : pas de Vue, pas de Svelte, pas de composant vanilla. On reste aussi dans le décoratif pur : c’est un indicateur d’attente, pas une barre de progression reliée à un état réel. Si votre stack colle, ces contraintes ne pèsent pas.
- 🎨 Une trentaine de spinners dessinés, pas recopiés d’un tutoriel
- ⚙️
size,coloretdurationpartout,playStatepour la pause - ♿
prefers-reduced-motionrespecté d’origine - 👀 Aperçu en direct pour chaque variante sur le site
- ⚛️ React 19 requis, licence MIT
Je garde Loading sous la main pour le prochain projet React où l’attente devra ressembler à un choix de design plutôt qu’à un oubli.
Sources
