CSS: spinner

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

-color-inverse ne repeint que 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 distincte. 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 dégradée IA en rotation.
.-color-ai-on-color	Étoile IA assortie à la couleur en rotation pour une surface colorée ou sombre.
.-color-inverse	Sur une surface sombre.
.-size-large	Large. Alias long de -size-lg.
.-size-lg	Grand.
.-size-sm	Petit.
.-size-small	Petit. Alias long de -size-sm.
.-size-x-small	Très petit. Alias en forme longue 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.

Tokens 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')