Générateur de loader CSS

Les animations de chargement CSS reposent sur deux éléments de base : une forme dessinée avec des bordures, des transformations ou un box-shadow, et une règle @keyframes qui la déplace en boucle. Six styles de loader sont intégrés à cet outil, chacun reposant sur une technique différente. Ring et Dual Ring utilisent l'astuce des bordures, en colorant différemment une partie du bord d'un cercle et en le faisant tourner avec rotate. Dots et Bars décalent la même animation sur plusieurs éléments grâce à animation-delay, de sorte que chaque élément bouge un temps après le précédent. Pulse agrandit et estompe un seul cercle, et Ripple étend un anneau vers l'extérieur tandis que son opacité tombe à zéro, le même effet que celui des indicateurs de chargement de type radar.

Choisissez un style, puis réglez la taille, la couleur, l'épaisseur et la vitesse avec les commandes situées sous l'aperçu. La taille modifie les dimensions globales de la forme, l'épaisseur contrôle la largeur de bordure des styles en anneau, la couleur met à jour d'un coup tous les éléments de l'animation, et la vitesse fixe la durée d'une boucle en secondes, de rapide et énergique à lente et calme. Le sélecteur d'arrière-plan de l'aperçu permet de vérifier le rendu du loader sur des surfaces blanches, grises et sombres avant de valider une couleur, car un anneau clair peut perdre en contraste sur un fond pâle.

Une fois le résultat satisfaisant, copiez le bloc CSS, qui comprend les keyframes et la règle de classe, ainsi que le court extrait HTML nécessaire à l'affichage. Rien n'est importé : le loader est généré et affiché entièrement dans votre navigateur.