CSS: spinner

.instui-spinner — Animasyonlu bir yükleme halkası veya AI döndürücüsü; role="status" ve bir aria-label verin.

-color-inverse yalnızca animasyonlu üst kenar segmentini yeniden boyar, tüm izi değil, bu yüzden ayrı bir iz rengine ihtiyaç duymadan koyu bir kart üzerinde hâlâ doğru okunur. AI varyantları halkanın yerine ortalanmış ai-spinner simgesini koyar ve aynı boyut ölçeğini korur.

Source: spinner.css

Erişilebilirlik

Ekran okuyucuların bunu canlı bir yükleme durumu olarak duyurması için spinner'a role="status" ve bir aria-label verin.

Kullanım

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

Demo

Örnekler

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

Değiştiriciler

Değiştirici	Açıklama
.-color-ai	Dönen AI gradyan yıldızı.
.-color-ai-on-color	Renklendirilmiş veya koyu bir yüzey için yüzeye uygun renkli AI yıldızı döner.
.-color-inverse	Koyu bir yüzeyde.
.-size-large	Büyük. -size-lg'ın uzun biçimli takma adı.
.-size-lg	Büyük.
.-size-sm	Küçük.
.-size-small	Küçük. -size-sm'ın uzun biçimli takma adı.
.-size-x-small	Ekstra küçük. -size-xs'in uzun biçimli takma adı.
.-size-xs	Ekstra küçük.

Animasyonlar

Animasyon	Açıklama
pantoken-spinner-rotate	Halkayı veya AI yıldızını daha yavaş, 2.25 saniyelik tempoda döndürür.

Tüketilen tokenler

Token	Tür	Değer
--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')