CSS: spinner

.instui-spinner — Cincin pemuat animasi atau pemutar AI; berikan role="status" dan aria-label.

-color-inverse hanya mewarnai ulang segmen border atas yang teranimasi, bukan seluruh lintasan, sehingga masih terbaca dengan benar pada kartu gelap tanpa perlu warna lintasan terpisah. Varian AI menggantikan cincin dengan glif centred ai-spinner sambil mempertahankan skala ukuran yang sama.

Source: spinner.css

Aksesibilitas

Beri spinner atribut role="status" dan aria-label agar screen reader 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>

Modifikator

Modifikator	Deskripsi
.-color-ai	Bintang bergradasi AI yang berputar.
.-color-ai-on-color	Bintang AI berwarna yang berputar untuk permukaan berwarna atau gelap.
.-color-inverse	Pada permukaan gelap.
.-size-large	Besar. Alias bentuk panjang dari -size-lg.
.-size-lg	Besar.
.-size-sm	Kecil.
.-size-small	Kecil. Alias bentuk panjang dari -size-sm.
.-size-x-small	Ekstra-kecil. Alias bentuk panjang dari -size-xs.
.-size-xs	Ekstra-kecil.

Animasi

Animasi	Deskripsi
pantoken-spinner-rotate	Memutar cincin, atau bintang AI pada kecepatan yang lebih lambat yaitu 2,25 detik.

Token yang digunakan

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