Générateur de charge SVG

L'SVG est un format vectoriel, donc les spinneurs restent parfaitement nets à toute taille et sur toute densité de pixels. Les tailles de fichiers sont minimes (souvent quelques centaines d'octets), les couleurs peuvent être modifiées via CSS en temps réel, et l'animation peut être suspendue, reprise ou redessinée sans avoir à re-encoder l'asset. En revanche, les GIFs sont des formats raster, plus volumineux, perdent de la qualité aux bords et sont bloqués aux couleurs et aux vitesses définies lors de l'exportation.

Un indicateur déterminé montre une progression réelle vers une somme connue, comme une barre de progression qui remplit de 0 à 100. Un indicateur indéterminé indique simplement à l'utilisateur que des travaux sont en cours lorsque la durée ou la progression ne peuvent pas être mesurées — par exemple, pendant l'attente d'une réponse réseau. La plupart des spinneurs (cercles tournants, points pulsants, vagues) sont indéterminés ; les barres de chargement peuvent être les deux, selon qu'elles montrent une section en mouvement ou une fraction de remplissage.

En tant que règle générale d'usabilité, ne montrez aucun indicateur pour des actions qui se terminent en moins de 100 ms — l'interface semble instantanée. Entre 100 ms et 1 seconde, un petit indicateur intégré près du contrôle concerné suffit. Au-delà de 1 seconde, utilisez un spinneur clair. Pour des attentes supérieures à 10 secondes, passez à un indicateur de progression déterminé avec un message significatif, car les utilisateurs commencent à perdre confiance en l'activité du système.

Les animations CSS ciblent les éléments SVG de la même manière qu'elles ciblent les éléments HTML : vous écrivez une règle keyframes et l'appliquez via la propriété animation sur une classe. Les cibles courantes incluent les transformations rotate pour les rotations, l'opacité pour les effets de disparition, et stroke-dashoffset pour l'effet de dessin sur les cercles et les lignes. Pour que la rotation pivote au centre visuel d'une forme, définissez transform-origin à ce point. Les animations déclarées dans un élément style à l'intérieur de l'SVG lui-même restent scopées à ce document, ce qui explique pourquoi un SVG autonome fonctionne lorsqu'il est déposé dans n'importe quelle page.

Marquez l'élément spinneur avec role=status (ou role=progressbar pour une progression déterminée) afin que les technologies d'assistance traitent les mises à jour comme une zone en temps réel. Fournissez une étiquette courte et significative, comme Chargement ou Enregistrement, afin que le but soit annoncé, et évitez de dépendre uniquement de la couleur pour transmettre l'état. Pour une progression déterminée, définissez également aria-valuenow, aria-valuemin et aria-valuemax afin que le pourcentage soit annoncé à mesure qu'il change.