CSS: spinner

.instui-spinner — Cincin pemuatan animasi atau pemutar AI; beri ia role="status" dan aria-label.

-color-inverse hanya mengecat semula segmen sempadan atas yang dianimasikan, bukan keseluruhan trek, jadi ia masih dibaca dengan betul pada kad gelap tanpa memerlukan warna trek berasingan. Varian AI menggantikan cincin dengan glyf terpusat ai-spinner sambil mengekalkan skala saiz yang sama.

Source: spinner.css

Aksesibiliti

Berikan spinner role="status" dan aria-label supaya pembaca skrin mengumumkannya sebagai status pemuatan langsung.

Penggunaan

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

Demo

Contoh

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

Pemodifikasi

Pemodifikasi	Penerangan
.-color-ai	Bintang gradien AI yang berputar.
.-color-ai-on-color	Bintang AI berputar sewarna untuk permukaan berwarna atau gelap.
.-color-inverse	Pada permukaan gelap.
.-size-large	Besar. Alias bentuk panjang bagi -size-lg.
.-size-lg	Besar.
.-size-sm	Kecil.
.-size-small	Kecil. Alias bentuk panjang bagi -size-sm.
.-size-x-small	Sangat kecil. Alias bentuk panjang bagi -size-xs.
.-size-xs	Sangat kecil.

Animasi

Animasi	Penerangan
pantoken-spinner-rotate	Memutar cincin, atau bintang AI pada kadar lebih perlahan 2.25 saat.

Token digunakan

Token	Jenis	Nilai
--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')