CSS: spinner

.instui-spinner — Un anillo de carga animado o spinner de IA; asígnale role="status" y un aria-label.

-color-inverse solo repinta el segmento superior animado del borde, no toda la pista, por lo que aún se muestra correctamente en una tarjeta oscura sin necesitar un color de pista separado. Las variantes de IA reemplazan el anillo con el glifo centrado ai-spinner manteniendo la misma escala de tamaño.

Source: spinner.css

Accesibilidad

Asigna al indicador de carga role="status" y un aria-label para que los lectores de pantalla lo anuncien como un estado de carga en vivo.

Uso

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

Demostración

Ejemplos

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

Modificadores

Modificador	Descripción
.-color-ai	Estrella giratoria con un degradado de IA.
.-color-ai-on-color	Estrella giratoria de IA a tono para una superficie coloreada u oscura.
.-color-inverse	En una superficie oscura.
.-size-large	Grande. Alias en forma larga de -size-lg.
.-size-lg	Grande.
.-size-sm	Pequeño.
.-size-small	Pequeño. Alias en forma larga de -size-sm.
.-size-x-small	Extra pequeño. Alias de forma larga de -size-xs.
.-size-xs	Extra pequeño.

Animaciones

Animación	Descripción
pantoken-spinner-rotate	Gira el anillo, o la estrella de IA a la cadencia más lenta de 2.25 segundos.

Tokens consumidos

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