Parcours de la tâche / de l'entrée au résultat
Comment concevoir un indicateur de chargement CSS
- 01
Choisissez un style d'indicateur
Ces instructions concernent le préréglage de base ; les modèles de la galerie ont leurs propres formes, couleurs, balisage et durées : Ouvrez Style d'indicateur et choisissez Anneau orbital pour un anneau rotatif classique ou Trois points pour un trio de points rebondissants. L'aperçu en direct s'anime à chaque modification, et chaque style embarque ses propres @keyframes à l'export. 264 Modèles · 24 Géométrie × 11 Mouvement · Catégorie · Couleur
- 02
Dimensionnez le cadre et le trait
Utilisez un cadre de 24 à 160 px et un trait ou des points de 2 à 20 px. Le trait d'un anneau doit faire moins de la moitié du cadre. Les trois points doivent tenir avec au moins 2 px entre eux ; sinon la copie et le téléchargement sont désactivés. Les dimensions exportées de l'anneau incluent sa bordure.
- 03
Réglez la vitesse et les couleurs
Ces instructions concernent le préréglage de base ; les modèles de la galerie ont leurs propres formes, couleurs, balisage et durées : Choisissez une Durée de cycle de 0.2 à 4 secondes par pas de 0.05 s. La Couleur active colore le bord supérieur de l'anneau ou le point central ; la Couleur de piste colore le reste de l'anneau ou les deux points extérieurs. Les cycles lents évoquent un travail d'arrière-plan tranquille ; les rapides donnent un sentiment d'urgence.
- 04
Ou partez de l'exemple
Ces instructions concernent le préréglage de base ; les modèles de la galerie ont leurs propres formes, couleurs, balisage et durées : Cliquez sur Charger un exemple pour appliquer un préréglage Trois points audacieux — cadre de 72 px, points de 12 px et cycle de 0.75 s en rouge et jaune — comme point de départ. Réinitialiser ramène toujours à l'anneau orbital par défaut.
- 05
Copiez ou téléchargez le CSS
Cliquez sur Copier le CSS pour placer la règle dans le presse-papiers, ou sur Télécharger le .css pour enregistrer toolars-loader.css. Le panneau de sortie affiche les octets exacts que vous exportez, et les deux boutons restent désactivés tant qu'une valeur échoue à la validation.
- 06
Intégrez-le à votre balisage
Ces instructions concernent le préréglage de base ; les modèles de la galerie ont leurs propres formes, couleurs, balisage et durées : Anneau orbital n'a besoin que d'un seul élément portant la classe .loader ; Trois points attend trois enfants span à l'intérieur. L'export inclut un bloc prefers-reduced-motion qui arrête l'animation pour les visiteurs sensibles au mouvement. Le HTML inclut le CSS actuel et un exemple fonctionnel. Les contrôles natifs acceptent le clavier.