CSS: spinner

.instui-spinner — Un anell de càrrega animat; dóna-li role="status" i un aria-label.

-color-inverse només repinta el segment animat de la vora superior, no tota la pista, així que encara es llegeix correctament en una targeta fosca sense necessitar un color de pista separat.

Source: spinner.css

Accessibilitat

Assigna al spinner role="status" i un aria-label perquè els lectors de pantalla l'anunciïn com un estat de càrrega en directe.

Ús

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

Demo

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>

Modificadors

Modificador	Descripció
.-color-inverse	Sobre una superfície fosca.
.-size-large	Gran. Àlies en forma llarga de -size-lg.
.-size-lg	Gran.
.-size-sm	Petit.
.-size-small	Petit. Àlies en forma llarga de -size-sm.
.-size-x-small	Extrapetit. Àlies en forma llarga de -size-xs.
.-size-xs	Extrapetit.

Animacions

Animació	Descripció
pantoken-spinner-rotate	—

Tokens consumits

Token	Tipus	Valor
--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))