CSS: spinner

.instui-spinner — Un anneau de chargement animé ou un spinner IA ; donnez-lui role="status" et un aria-label.

-color-inverse repeint uniquement le segment de bordure supérieur animé, pas toute la piste, de sorte qu'il reste lisible sur une carte sombre sans nécessiter une couleur de piste séparée. Les variantes IA remplacent l'anneau par le glyphe centré ai-spinner tout en conservant la même échelle de taille.

Source: spinner.css

Accessibilité

Donnez au spinner role="status" et un aria-label afin que les lecteurs d'écran l'annoncent comme un état de chargement en direct.

Utilisation

@import "@pantoken/components/components.css";
@import "@pantoken/components/spinner.css";

Démo

Exemples

<span class="instui-spinner" role="status" aria-label="Loading"></span>

Inverse color

<div class="instui-view instui-card -background-primary-inverse">
  <span class="instui-spinner -color-inverse" role="status" aria-label="Loading"></span>
</div>

Modificateurs

Modificateur	Description
.-color-ai	Étoile en rotation avec un dégradé IA.
.-color-ai-on-color	Étoile IA en rotation assortie à la couleur, pour une surface colorée ou sombre.
.-color-inverse	Sur une surface sombre.
.-size-large	Grand. Alias longue forme de -size-lg.
.-size-lg	Grand.
.-size-sm	Petit.
.-size-small	Petit. Alias longue forme de -size-sm.
.-size-x-small	Très petit. Alias longue forme de -size-xs.
.-size-xs	Très petit.

Animations

Animation	Description
pantoken-spinner-rotate	Fait tourner l'anneau, ou l'étoile IA à un rythme plus lent de 2,25 secondes.

Jetons consommés

Token	Type	Valeur
--instui-color-icon-on-color	<color>	#ffffff
--instui-color-stroke-ai-bottom-gradient	<color>	LightDarklight-dark(#00828E, #04A4B7)
--instui-color-stroke-ai-top-gradient	<color>	LightDarklight-dark(#9E58BD, #B680CC)
--instui-component-spinner-color	<color>	LightDarklight-dark(#2369A4, #7FB4F1)
--instui-component-spinner-inverse-color	<color>	#ffffff
--instui-component-spinner-spinner-size-lg	<length>	4.5rem
--instui-component-spinner-spinner-size-md	<length>	3.5rem
--instui-component-spinner-spinner-size-sm	<length>	2rem
--instui-component-spinner-spinner-size-xs	<length>	1rem
--instui-component-spinner-stroke-width-lg	<length>	0.75em
--instui-component-spinner-stroke-width-md	<length>	0.5em
--instui-component-spinner-stroke-width-sm	<length>	0.375em
--instui-component-spinner-stroke-width-xs	<length>	0.25em
--instui-component-spinner-track-color	<color>	LightDarklight-dark(rgba(35,68,101,0.1), rgba(255,255,255,0.1))
--instui-icon-ai-spinner	<image>	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M11.0621%202.53451C11.3843%201.66389%2012.6157%201.66389%2012.9379%202.53451L15.0815%208.32767C15.1828%208.60139%2015.3986%208.8172%2015.6723%208.91848L21.4655%2011.0621C22.3361%2011.3843%2022.3361%2012.6157%2021.4655%2012.9379L15.6723%2015.0815C15.3986%2015.1828%2015.1828%2015.3986%2015.0815%2015.6723L12.9379%2021.4655C12.6157%2022.3361%2011.3843%2022.3361%2011.0621%2021.4655L8.91849%2015.6723C8.8172%2015.3986%208.60139%2015.1828%208.32767%2015.0815L2.53451%2012.9379C1.66389%2012.6157%201.66389%2011.3843%202.53451%2011.0621L8.32767%208.91849C8.60139%208.8172%208.8172%208.60139%208.91848%208.32767L11.0621%202.53451Z%22%2F%3E%3C%2Fsvg%3E')