Générateur de loaders CSS

Qu'est-ce que Générateur de loaders CSS ?

Le Générateur de Loaders CSS est un outil gratuit dans le navigateur destiné aux web designers et développeurs front-end qui ont besoin d'un indicateur de chargement en CSS pur sans ajouter de bibliothèque. Choisissez parmi cinq styles - spinner, anneau, points, barres et pulse - puis contrôlez la taille en pixels, la couleur principale, la vitesse d'un cycle d'animation en secondes, l'épaisseur du trait et le nombre de points ou de barres. Un aperçu s'anime pendant que vous éditez, et le balisage HTML accompagné d'un bloc de style CSS avec @keyframes se met à jour instantanément pour que vous puissiez l'insérer directement dans une page. Utilisez-le pour des boutons, des loaders de page, des états squelette et des espaces réservés asynchrones, ou pour apprendre comment l'animation CSS et @keyframes pilotent chaque effet.

Comment utiliser Générateur de loaders CSS

1. Choisissez un style de loader : Spinner, Anneau, Points, Barres ou Pulse.
2. Réglez la taille en pixels et choisissez une couleur avec l'échantillon ou en saisissant une valeur.
3. Réglez la vitesse d'animation en secondes pour un cycle complet.
4. Ouvrez les Réglages pour ajuster l'épaisseur du trait (spinner et anneau) ou le nombre de points ou de barres.
5. Observez l'animation de l'aperçu en direct, puis copiez le HTML et le CSS générés avec le bouton de copie.

Exemples

Style : Spinner, taille 48px, couleur #4f86f7, vitesse 1s, épaisseur 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

Style : Points, taille 48px, couleur #9333ea, vitesse 1s, nombre 3

<div class="dd-loader"><div></div><div></div><div></div></div> avec un animation-delay décalé pour que les points se mettent à l'échelle en vague.

Questions fréquentes

Quels styles de loader sont disponibles ?

Cinq : Spinner (un arc qui tourne), Anneau (un anneau rotatif plus épais), Points (des points qui se mettent à l'échelle en vague), Barres (des barres qui s'étirent de haut en bas) et Pulse (un seul cercle qui pulse). Changez avec le menu de style et l'aperçu et le code se mettent à jour instantanément.

À quoi servent les réglages de taille, couleur et vitesse ?

La taille définit les dimensions en pixels du loader, la couleur définit la couleur principale (utilisez le sélecteur ou saisissez n'importe quelle couleur CSS) et la vitesse est la durée d'un cycle d'animation en secondes. L'épaisseur contrôle le trait du spinner et de l'anneau, tandis que le nombre contrôle combien de points ou de barres apparaissent.

Le CSS généré est-il du CSS pur sans JavaScript ?

Oui. L'extrait est du HTML simple plus un bloc <style> utilisant l'animation CSS et @keyframes, il fonctionne donc sans aucun JavaScript ni bibliothèque externe. Collez-le dans votre page et il fonctionne seul.

Pourquoi l'épaisseur et le nombre ne modifient-ils pas tous les styles ?

L'épaisseur n'affecte que le spinner et l'anneau (qui dessinent une bordure), tandis que le nombre n'affecte que les points et les barres (qui rendent plusieurs éléments). Les autres styles les ignorent, ainsi la sortie reste propre pour le style que vous avez choisi.

Quelque chose est-il téléversé vers un serveur ?

Non. Le loader et son CSS sont entièrement construits dans votre navigateur avec des calculs de chaînes locaux - aucun réglage, couleur ni code n'est jamais envoyé à un serveur, il fonctionne donc hors ligne et garde votre travail privé.