Loaders
Des loaders en CSS pur, classés par style : cliquez pour copier le code
1–24 sur 182
À propos de l'outil
Cette galerie propose 182 indicateurs de chargement écrits en HTML et CSS pur, sans JavaScript ni image. Ils sont répartis en dix-huit catégories, dont spinners, points, barres, progression, pulsation, orbites, vagues, 3D, glitch ou texte. Ils servent à signaler l’attente d’une réponse d’API, le chargement d’une page ou l’envoi d’un formulaire, avec une animation qui s’intègre à votre interface.
Tous les loaders suivent la propriété CSS color, ce qui les rend faciles à accorder à votre thème. La couleur choisie dans l’outil est ajoutée en tête du CSS copié, sur l’élément principal du loader. Les animations reposent sur des keyframes préfixées par mwb-, pour limiter les conflits de noms avec celles de votre projet. La galerie affiche 24 modèles par page.
Comment l'utiliser
- Choisissez une catégorie, ou Tous pour parcourir l’ensemble des loaders.
- Réglez la Couleur pour voir les aperçus dans votre teinte.
- Cliquez sur un loader pour ouvrir son code.
- Cliquez sur Copier le HTML et Copier le CSS, puis collez le HTML là où le chargement s’affiche et le CSS dans votre feuille de style.
Questions fréquentes
Ces loaders ont-ils besoin de JavaScript ?
Non, l’animation est entièrement en CSS. Le JavaScript ne sert, dans votre application, qu’à afficher le loader pendant le chargement puis à le retirer, par exemple en ajoutant ou supprimant l’élément du DOM.
Comment changer la couleur d’un loader déjà copié ?
Les loaders utilisent currentColor. Modifiez la propriété color dans la première règle du CSS copié, ou sur un élément parent, et toute l’animation prend la nouvelle couleur sans autre changement.
Les loaders fonctionnent-ils sur fond clair ?
Les aperçus sont présentés sur un fond sombre, mais les loaders ne dépendent pas du fond : choisissez simplement une couleur assez contrastée avec celui de votre page, par exemple un gris foncé sur fond blanc.
Sous quelle licence sont-ils publiés ?
Les loaders font partie du code de MagicWebBox, projet open source publié sous licence MIT. Vous pouvez les réutiliser, y compris dans un projet commercial, en respectant les conditions de cette licence.