CSS: spinner

.instui-spinner — Yon bag chaje anime oswa spinner AI; bay li role="status" ak yon aria-label.

-color-inverse sèlman repenn segman animasyon an nan fwontyè anlè a, pa tout tras la, kidonk li toujou li kòrèkteman sou yon kat fonse san yo pa bezwen yon koulè tras apa. Varyant AI yo ranplase bag la ak glif ai-spinner ki santre pandan y ap kenbe menm echèl gwosè a.

Source: spinner.css

Aksè

Bay spinner la role="status" ak yon aria-label pou lektè ekran yo anonse li kòm yon estati chajman an dirèk.

Itilizasyon

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

Demo

Egzanp

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

Modifikatè

Modifikatè	Deskripsyon
.-color-ai	Etwal gradyan AI k ap vire.
.-color-ai-on-color	Etwal AI sou-koulè k ap vire pou yon sifas koulè oswa fonse.
.-color-inverse	Sou yon sifas fonse.
.-size-large	Gwo. Alias long fòm pou -size-lg.
.-size-lg	Gwo.
.-size-sm	Ti.
.-size-small	Ti. Alias long fòm pou -size-sm.
.-size-x-small	Ekstra-ti. Aliaz fòm long pou -size-xs.
.-size-xs	Ekstra-ti.

Animasyon

Animasyon	Deskripsyon
pantoken-spinner-rotate	Vire bag la, oswa etwal AI a, nan yon kadans pi dousman 2.25 segonn.

Tokens konsome

Token	Tip	Valè
--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')