CSS: spinner

.instui-spinner — Un anell de càrrega animat o un spinner d'IA; proporcioneu-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 necessitat d'un color de pista separat. Les variants d'IA substitueixen l'anell pel glif centrat ai-spinner mantenint la mateixa escala de mida.

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-ai	Estrella giratòria amb degradat d'IA.
.-color-ai-on-color	Estrella d'IA giratòria amb el color corresponent per a una superfície acolorida o fosca.
.-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	Fa girar l'anell, o l'estrella d'IA amb la cadència més lenta de 2.25 segons.

Tokens consumits

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