Chargement des signaux
Pixel loader
Candidate
Pixel loader signale un chargement court ou une synchronisation en cours. Il reprend la logique de matrice des identites produits, avec un reveal progressif des pixels, une rotation de 90 degres, puis une disparition en boucle.
Preview
Section titled “Preview” Chargement
Chargement global Chargement ServerSide Chargement Audience
Layouts
Section titled “Layouts” Chargement des signaux
| Layout | Usage |
|---|---|
stacked | Etat de chargement centre dans une carte, une section ou une vue vide |
inline | Chargement compact dans une ligne, un bouton adjacent ou un panneau dense |
Products
Section titled “Products” Audience
ServerSide
Neutral
| Size | Usage |
|---|---|
sm | Chargement inline, dans une ligne ou une action compacte |
md | Chargement standard dans une carte ou une zone de contenu |
lg | Etat de chargement principal dans une section |
xl | Etat de chargement immersif, hero ou plein ecran |
---import PixelLoader from '@sirdata/pixel/astro/PixelLoader';---
<PixelLoader product="serverside" size="md" layout="stacked" label="Chargement des signaux" />layout vaut stacked par defaut. Utiliser inline lorsque le loader accompagne un texte dans un espace horizontal contraint.
Tokens
Section titled “Tokens”Pixel loader utilise les tokens produits lorsque disponibles :
| Product | Token |
|---|---|
audience | --color-product-audience-primary |
abconsent | --color-product-abconsent-primary |
serverside | --color-product-serverside-primary |
neutral | --color-text-primary |
inverse | --color-text-inverse |
Les dimensions s’appuient sur --size-24, --size-40 et --size-64. La taille xl correspond a 1.5 × --size-64. Le label utilise les tokens label-md.
Motion
Section titled “Motion”L’animation est realisee en SVG inline et CSS keyframes, sans JavaScript. Elle suit trois temps : reveal stagger des pixels, rotation horaire de la matrice complete, puis disparition progressive.
prefers-reduced-motion desactive l’animation et affiche la matrice complete.
Do / Don’t
Section titled “Do / Don’t”| Do | Don’t |
|---|---|
| Utiliser le produit correspondant au contexte charge. | Melanger plusieurs loaders produits dans la meme zone. |
| Ajouter un label explicite pour l’accessibilite. | Utiliser le loader sans texte accessible. |
| Garder le loader pour des attentes courtes. | Remplacer des etats vides ou erreurs par un loader infini. |
Utiliser neutral dans les contextes non produits. | Appliquer une couleur arbitraire hors tokens. |
Accessibility
Section titled “Accessibility”Le composant utilise role="status" et expose label via aria-label. Le SVG est masque aux technologies d’assistance. Pour un chargement long, ajouter un message de progression ou un etat descriptif dans la page.
Status
Section titled “Status”Candidate. La V1 couvre les tailles, les variantes produits et la reduction de mouvement. La personnalisation avancee des timings reste hors scope.