Progress Steps
Indicateur d'étapes numérotées : l'étape en cours s'allume en indigo, les précédentes passent au vert et le trait qui les relie se remplit.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Data comprend 28 effets, dont 1 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Les étapes forment une liste ordonnée <ol class="pgs-list"> ; chaque <li class="pgs-step"> contient une pastille .pgs-dot et un libellé .pgs-label. Les traits de liaison ne sont pas des éléments en plus : ce sont les pseudo-éléments ::before (le rail gris) et ::after (le remplissage en dégradé vert-indigo) de chaque étape sauf la première.
L'étape en cours se lit dans l'attribut data-current de la racine. Le script pose .pgs-done sur les étapes d'avant, .pgs-current et aria-current="step" sur l'étape en cours ; le CSS colore la pastille (vert, ou indigo avec un halo) et étire le remplissage du trait (scaleX, 0,6 s). Avec data-current égal au nombre d'étapes plus un, toutes sont terminées.
Un MutationObserver par instance surveille data-current : racine.setAttribute('data-current', 3) suffit pour avancer ou reculer. Quand l'indicateur entre à l'écran, il part de la première étape et remplit les suivantes une à une (0,25 s d'écart) jusqu'à l'étape en cours.
Le nombre d'étapes est libre ; elles se partagent la largeur (jusqu'à --pgs-max-width, 420 px) et les libellés longs passent à la ligne sous leur pastille.
Accessibilité
- Liste ordonnée et étape courante : un lecteur d'écran annonce « liste, 4 éléments », puis chaque étape avec son numéro et son libellé ; l'étape en cours porte
aria-current="step". - État écrit, pas seulement coloré : les étapes terminées reçoivent un texte masqué visuellement « (terminée) » (« (completed) » sur une page en anglais), pour ne pas dépendre du vert.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, couleurs et traits changent sans transition et l'état final s'affiche dès l'apparition. - Indicateur, pas navigation : les étapes ne sont pas cliquables. Si l'utilisateur doit pouvoir revenir à une étape, mettez des liens ou des boutons dans les libellés et gérez-les vous-même.
Compatibilité navigateur
Flexbox, pseudo-éléments, transitions de transform et de couleurs, MutationObserver, IntersectionObserver. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : deux indicateurs indépendants dans la même page (changer l'un ne touche pas l'autre), trait en cours de remplissage à 150 ms, 390 px, fond blanc, aucune erreur JS.
Sans JavaScript, les pastilles et libellés s'affichent tous en gris, sans étape mise en avant : la liste reste lisible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0248-root" data-current="2">
<ol class="pgs-list" aria-label="Étapes de la commande">
<li class="pgs-step"><span class="pgs-dot">1</span><span class="pgs-label">Panier</span></li>
<li class="pgs-step"><span class="pgs-dot">2</span><span class="pgs-label">Infos</span></li>
<li class="pgs-step"><span class="pgs-dot">3</span><span class="pgs-label">Paiement</span></li>
<li class="pgs-step"><span class="pgs-dot">4</span><span class="pgs-label">Terminé</span></li>
</ol>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
data-current (HTML, sur la racine) |
2 | Numéro de l'étape en cours (1 = la première). Le nombre d'étapes plus un marque tout comme terminé. |
| Étapes (HTML) | 4 : Panier, Infos, Paiement, Terminé | Ajoutez ou retirez des <li class="pgs-step"> ; numéros et libellés sont libres. |
--pgs-active, --pgs-glow (CSS) |
#6366f1, rgba(99,102,241,.5) | Couleur et halo de l'étape en cours. |
--pgs-done, --pgs-fill (CSS) |
#10b981, dégradé vert → indigo | Couleur des étapes terminées et du trait rempli. |
--pgs-idle, --pgs-idle-border, --pgs-text, --pgs-text-on (CSS) |
blanc 8 %, blanc 15 %, blanc 40 %, blanc 80 % | Pastilles à venir et libellés ; à remplacer par des teintes sombres sur fond clair. |
--pgs-dot-size, --pgs-max-width (CSS) |
36px, 420px | Taille des pastilles (les traits se recalent dessus) et largeur maximale. |
--pgs-speed (CSS) |
.6s | Durée du remplissage d'un trait. |
--pgs-bg, --pgs-min-height (CSS) |
#0a0a0f, 300px | Fond et hauteur minimale de la racine. |
FAQ
indicateur.setAttribute('data-current', numero). Le script observe l'attribut ; il n'y a pas de fonction globale à appeler et plusieurs indicateurs peuvent cohabiter.data-current le nombre d'étapes plus un (5 pour quatre étapes) : toutes les pastilles passent au vert et tous les traits sont remplis, aucune n'est marquée « en cours ».--pgs-max-width ; sur mobile, cinq étapes de plus de dix lettres deviennent difficiles à lire.
