CSS: spinner

.instui-spinner — Un anello di caricamento animato o spinner AI; assegnare role="status" e un aria-label.

-color-inverse ridipinge solo il segmento animato del bordo superiore, non l'intero percorso, quindi rimane leggibile correttamente su una scheda scura senza necessitare di un colore separato per il percorso. Le varianti AI sostituiscono l'anello con il glifo centrato ai-spinner mantenendo la stessa scala di dimensioni.

Source: spinner.css

Accessibilità

Assegna allo spinner role="status" e un aria-label in modo che gli screen reader lo annuncino come stato di caricamento in tempo reale.

Uso

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

Demo

Esempi

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

Modificatori

Modificatore	Descrizione
.-color-ai	Stella rotante con gradiente AI.
.-color-ai-on-color	Stella AI rotante in tinta per una superficie colorata o scura.
.-color-inverse	Su una superficie scura.
.-size-large	Grande. Alias esteso di -size-lg.
.-size-lg	Grande.
.-size-sm	Piccolo.
.-size-small	Piccolo. Alias esteso di -size-sm.
.-size-x-small	Extra-piccolo. Alias esteso di -size-xs.
.-size-xs	Extra-piccolo.

Animazioni

Animazione	Descrizione
pantoken-spinner-rotate	Fa ruotare l'anello, o la stella AI alla cadenza più lenta di 2,25 secondi.

Token consumati

Token	Tipo	Valore
--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')