CSS: spinner

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

-color-inverse ne repeint que le segment animé de la bordure supérieure, pas toute la piste, donc il reste lisible sur une carte sombre sans nécessiter une couleur de piste distincte.

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-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	—

Tokens consommés

Token	Type	Valeur
--instui-component-spinner-color	<color>	LightDarklight-dark(#2871AF, #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))