Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
Chargement✨ Premium

Gradient Ring

Anneau de 50 px — dégradé conique transparent→#6366f1, centre masqué par un ::before à inset 5 px (fond fixe #0a0a0f) — 1 tour/s linéaire, zéro JS.

CSSGradient

Vous aurez accès à la démo interactive avec un compte gratuit.

Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Chargement comprend 29 effets, dont 4 gratuits. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit

3 exemples d'usage

Bouton « Envoyer » pendant la soumission d'un formulaire — Gradient Ring exemple 1

① Bouton « Envoyer » pendant la soumission d'un formulaire

QuandFormulaire de contact ou de paiement : l'utilisateur clique « Envoyer », le bouton se désactive et l'anneau remplace le libellé le temps de l'appel réseau.
PourquoiÀ 24 px, l'anneau tient dans la hauteur d'un bouton standard. Son arc en fondu (transparent → plein) est moins agressif qu'un spinner à segment uniforme et n'indique pas de pourcentage — adapté quand la durée est inconnue.
Réglageswidth: 24px; height: 24px, inset: 3px sur ::before, background: #0a0a0f remplacé par la couleur de fond du bouton, animation-duration: 0.8s.
Lecteur de musique — anneau autour de la pochette pendant la mise en mémoire tampon — Gradient Ring exemple 2

② Lecteur de musique — anneau autour de la pochette pendant la mise en mémoire tampon

QuandLecteur audio (application ou widget « en lecture ») : la piste démarre sur une connexion lente, le lecteur reste affiché et l'anneau tourne autour de la pochette ronde le temps que le tampon se remplisse ; il disparaît dès que la lecture reprend.
PourquoiLe masque central est ici le cœur de l'usage : à 160 px, l'anneau encadre la pochette au lieu de la recouvrir, et le dégradé conique sans échancrure garde ce cadre fermé tout en montrant nettement le sens de rotation — un spinner à segment franc (fx-0421) ouvrirait une brèche dans le cadre, des points ou une barre réclameraient leur propre emplacement. À cette taille, la queue transparente laisse voir la surface du lecteur : l'anneau se lit comme un halo qui orbite, non comme un disque posé sur l'image.
Réglageswidth: 160px; height: 160px, inset: 6px sur ::before (anneau de 6 px, diamètre intérieur 148 px), background: #0a0a0f remplacé par le fond de la carte du lecteur (#12121a) — visible dans les 4 px d'écart entre l'anneau et la pochette de 140 px posée par-dessus —, animation-duration: 1.4s (à ce diamètre, 1 s paraît précipité). La pochette est un frère de l'anneau, pas un enfant : elle ne tourne pas avec lui.
Écran de connexion — « Vérification de vos identifiants » sur un écran vide — Gradient Ring exemple 3

③ Écran de connexion — « Vérification de vos identifiants » sur un écran vide

QuandInterstitiel après la soumission d'un formulaire de connexion ou au retour d'un SSO : la page n'a plus rien à montrer tant que la session n'est pas ouverte — l'anneau seul, centré, une ligne d'état, et rien d'autre.
PourquoiSur un écran vide, l'indicateur porte l'interface à lui seul, donc il doit être grand : le dégradé conique est vectoriel et reste net à 104 px, là où un loader bitmap ou à points se dégrade ou se disperse. Sa rotation linéaire sans à-coups convient à une attente de durée inconnue que l'on veut rassurante — ni la pulsation d'un « démarrage imminent », ni la fausse promesse d'une barre de progression. Et c'est le seul contexte de la fiche où le masque codé en dur (#0a0a0f) convient tel quel : l'écran est posé sur la surface de base de l'application.
Réglageswidth: 104px; height: 104px, inset: 8px sur ::before (anneau de 8 px, plus lisible seul sur fond nu), animation-duration: 1.2s ; background: #0a0a0f du ::before conservé — le fond de l'écran est exactement #0a0a0f. role="status" + aria-label sur l'anneau, aria-busy="true" sur l'écran.

Comment ça marche

Structure. Un seul div.loader-gradient-ring de 50 × 50 px, border-radius: 50%. Son fond : conic-gradient(transparent, #6366f1) — le dégradé conique balaie 360° à partir de 0° (haut, sens horaire), du transparent à l'indigo, peignant une couronne dont la teinte s'épaissit progressivement. Le pseudo-élément ::before (content: ""; position: absolute; inset: 5px; background: #0a0a0f; border-radius: 50%) pose un disque de 40 × 40 px qui masque le centre : il ne reste visible que les 5 px périphériques qui forment l'anneau. Aucun JavaScript, aucune dépendance.

Animation. @keyframes ringRotate { to { transform: rotate(360deg) } }, appliquée en animation: 1s linear 0s infinite. Le disque tourne à vitesse constante, un tour complet par seconde. Le dégradé conique tourne avec lui : la zone pleinement opaque mène, la zone transparente referme le cercle. Mesuré dans Chromium : la matrice de transformation confirme environ 90° de rotation en 250 ms — quart de tour par quart de seconde, boucle infinie sans dérive.

Contrainte d'intégration. Le fond du ::before est codé en dur à #0a0a0f, couleur du conteneur de démo .demo-preview. Hors de ce conteneur, sur tout fond différent, le masque central reste sombre et devient visible : l'anneau ressemble alors à un disque coloré sur fond sombre cerclé d'un arc, non à un anneau transparent. Pour corriger, remplacez background: #0a0a0f sur .loader-gradient-ring::before par la couleur exacte du fond porteur.

Accessibilité

  • prefers-reduced-motion absent : aucune règle @media (prefers-reduced-motion: reduce) dans le code vendu. Mesuré sous émulation réduite : playState: "running", la rotation continue. Ajoutez @media (prefers-reduced-motion: reduce) { .loader-gradient-ring { animation-duration: 10s } } pour ralentir fortement, ou animation: none pour l'arrêter.
  • role="status" absent : l'anneau est muet pour les lecteurs d'écran. Pour un indicateur de chargement, posez role="status" (ou role="progressbar") sur l'élément avec aria-label="Chargement…", ou insérez un texte masqué visuellement en enfant (.sr-only).
  • aria-busy / aria-live absents : l'anneau n'annonce pas la fin du chargement. La pratique correcte est de poser aria-busy="true" sur le conteneur qui se charge (pas sur l'anneau lui-même), et de le retirer une fois le contenu disponible. L'anneau reste alors un indicateur visuel seul.
  • Si l'anneau est utilisé en pur décor sans rôle sémantique, posez aria-hidden="true" sur div.loader-gradient-ring pour que les technologies d'assistance l'ignorent — et déléguez la notification de chargement à un aria-live existant dans la page.

Compatibilité navigateur

Deux propriétés fixent le plancher : conic-gradient (Chrome 69, Firefox 83, Safari 12.1) et le raccourci inset (Chrome 87, Firefox 87, Safari 14.1 — plus restrictif). Zéro JavaScript, zéro dépendance.

Chrome 87+✓ Complet
Firefox 87+✓ Complet
Safari 14.1+✓ Complet
Edge 87+✓ Complet
Chrome 69–86✓ Partiel (inset ignoré : centre non masqué, disque plein visible)
Mobile iOS 14.5+✓ Complet

Sans conic-gradient (IE, navigateurs antérieurs à 2018) : fond transparent, anneau invisible. Sans inset (Chrome 69–86, Firefox 61–86) : le masque ::before ne se positionne pas, le dégradé conique apparaît comme un disque plein en rotation. Dans les deux cas, le repli naturel est un spinner border classique.

Le code

Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :

index.html — structure 
<div class="loader-gradient-ring"></div>
🔒 Débloquer le code complet — à partir de 2,99 € le 1er mois

HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriétéDéfautEffet
Diamètre extérieur (CSS — width: 50px; height: 50px) 50 px Taille totale de l'anneau. Changez les deux valeurs ensemble. 20–24 px : tient dans un bouton ou une bulle. 60–80 px : indicateur de zone.
Épaisseur de l'anneau (CSS — inset: 5px sur ::before) 5 px (diamètre intérieur = 50 − 2×5 = 40 px) Distance entre le bord extérieur et le masque central. 3px : anneau fin. 8px : anneau épais, plus lisible à petite taille.
Fond du masque (CSS — background: #0a0a0f sur ::before) #0a0a0f Doit correspondre exactement au fond du conteneur. Blanc : #ffffff. Variable CSS partagée : var(--surface). Toute valeur différente rend le masque visible comme un disque sombre.
Couleur de l'arc (CSS — conic-gradient(transparent, #6366f1)) #6366f1 (indigo) Remplacez #6366f1. Le départ reste transparent. Pour que l'arc commence déjà coloré (aucune zone invisible) : conic-gradient(#6366f199, #6366f1).
Vitesse de rotation (CSS — première valeur de animation) 1s 0.6s : rotation vive. 2s : état de fond discret. La vitesse perçue dépend aussi de l'arc : un arc long paraît plus rapide.
Timing (CSS — linear) linear Standard pour un spinner. ease-in-out donne un léger relâchement à chaque tour — organique mais peu conventionnel pour un indicateur de chargement.
Sens de rotation (CSS — animation-direction) normal (sens horaire) animation-direction: reverse pour un sens anti-horaire. Certaines interfaces utilisent ce sens pour des spinners d'annulation ou de « déchargement ».

FAQ

Le fond du ::before est codé en dur à #0a0a0f — couleur du conteneur de démo. Sur tout fond différent, le masque reste sombre et devient visible. Correctif : remplacez background: #0a0a0f sur .loader-gradient-ring::before par la couleur exacte de votre fond. Si l'anneau apparaît sur plusieurs surfaces différentes, une variable CSS partagée (--ring-bg: #votre-fond) évite de modifier plusieurs règles.
Le code actuel (conic-gradient(transparent, #6366f1)) fait un fondu sur les 360° complets : un quart de l'anneau environ est quasi invisible. Pour un arc opaque sur 270° suivi d'une queue transparente de 90°, utilisez conic-gradient(#6366f1 0deg 270deg, transparent 270deg 360deg). Pour des bords francs sans fondu : conic-gradient(#6366f1 270deg, transparent 270deg).
fx-0421 utilise border: 4px solid avec trois côtés en indigo et un côté transparent — anneau uniforme avec une échancrure franche et un seul élément HTML, aucun masque. fx-0435 peint le dégradé sur le fond du disque via conic-gradient et masque le centre avec ::before : la couleur varie continûment de transparent à plein, sans échancrure. La technique border ne permet pas de dégradé angulaire ; la technique conic-gradient permet n'importe quelle palette angulaire mais exige que le fond du masque corresponde au fond porteur.