Comment animer un anneau de progression circulaire
Comment construire un anneau de progression animé en SVG, quand utiliser une progression déterminée ou indéterminée, et pourquoi ne pas animer une fausse progression.
À retenir
Utilisez un anneau déterminé seulement quand vous savez réellement où en est le travail. Construisez-le avec un cercle SVG, animez stroke-dashoffset et mettez la valeur à jour depuis de vrais événements de progression. Si la progression est inconnue, utilisez un indicateur indéterminé plutôt qu'un anneau qui avance vers 90 pour cent. Associez toujours l'anneau à une valeur textuelle ou accessible.
Déterminé ou indéterminé
Un anneau déterminé montre une proportion ; un indicateur indéterminé montre qu'il y a du travail sans dire combien il en reste. Ils répondent à des questions différentes, et les mélanger produit la fausse barre qui bloque à 90 pour cent. Si vous ne pouvez pas mesurer la progression, ne dessinez pas un anneau qui la simule.
La technique du trait SVG
Dessinez un cercle avec fill none, donnez-lui un trait et fixez stroke-dasharray à la circonférence. Animez ensuite stroke-dashoffset depuis la circonférence complète jusqu'au décalage du pourcentage courant. Faites tourner le cercle pour que l'anneau commence à midi.
Adoucissez les mises à jour, pas la vérité
Les événements de progression arrivent souvent par sauts. Lisser la transition visuelle entre deux valeurs réelles est correct et plus agréable ; inventer du mouvement entre les mises à jour ne l'est pas. Gardez la valeur affichée liée à la dernière mesure réelle.
Donnez un état visible au travail lent
Si une étape est longue, un anneau qui bouge à peine paraît figé. Associez-lui un libellé décrivant l'étape et envisagez un mouvement indéterminé discret à l'intérieur de l'anneau. Ne faites pas tourner l'anneau déterminé entier, ce qui détruit la lecture de la progression.
Étiquetez-le et exposez la valeur
Placez le pourcentage ou l'étape en texte à côté de l'anneau et donnez à l'élément une valeur accessible avec la sémantique progressbar. Un anneau purement visuel est invisible pour les lecteurs d'écran.
Performance
Un anneau SVG piloté par le décalage du trait est généralement moins coûteux qu'un redessin canvas ou qu'une barre basée sur la mise en page. Animez-le depuis une seule valeur et évitez de rendre à nouveau un grand arbre à chaque image. Testez sur un téléphone de milieu de gamme.
Extrait d’implémentation en production
<svg viewBox="0 0 36 36" role="progressbar"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="65">
<circle cx="18" cy="18" r="15.9" fill="none"
stroke="#e5e5e5" stroke-width="3" />
<circle cx="18" cy="18" r="15.9" fill="none"
stroke="#ff4a1c" stroke-width="3"
stroke-dasharray="100"
stroke-dashoffset="35"
transform="rotate(-90 18 18)" />
</svg>
<!-- pathLength="100" lets you use percentages directly. -->Principes clés à retenir
- Utilisez un anneau déterminé seulement quand la progression est mesurable
- Animez stroke-dashoffset sur un cercle SVG
- Lissez les transitions entre valeurs réelles, n'inventez jamais de mouvement
- Associez l'anneau à du texte et à la sémantique progressbar
- Testez l'écran de chargement sur un téléphone de milieu de gamme
Questions fréquentes
Sources
- stroke-dasharray — MDN Web Docs
- ARIA progressbar role — MDN Web Docs
- Animation performance and frame rate — web.dev