CSS: spinner

.instui-spinner — Een geanimeerde laadring of AI-spinner; geef het role="status" en een aria-label.

-color-inverse verft alleen het geanimeerde bovenste randsegment opnieuw, niet de hele baan, zodat het op een donkere kaart nog steeds goed leesbaar blijft zonder dat er een aparte baankleur nodig is. De AI-varianten vervangen de ring door het gecentreerde ai-spinner glyf terwijl ze dezelfde schaalgrootte behouden.

Source: spinner.css

Toegankelijkheid

Geef de spinner role="status" en een aria-label zodat schermlezers dit aankondigen als een live laadstatus.

Gebruik

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

Demo

Voorbeelden

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

Modifiers

Modifier	Beschrijving
.-color-ai	Draaiende AI-gradient-ster.
.-color-ai-on-color	Draaiende AI-ster in kleur voor een gekleurde of donkere ondergrond.
.-color-inverse	Op een donkere achtergrond.
.-size-large	Groot. Langvormig alias van -size-lg.
.-size-lg	Groot.
.-size-sm	Klein.
.-size-small	Klein. Langvormig alias van -size-sm.
.-size-x-small	Extra-klein. Volledige alias van -size-xs.
.-size-xs	Extra-klein.

Animaties

Animatie	Beschrijving
pantoken-spinner-rotate	Draait de ring, of de AI-ster met het langzamere 2.25-seconden ritme.

Gebruikte tokens

Token	Type	Waarde
--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')