Holat va javob · molecule
Spinner
Neytral yuklaniş aylanasi, matn rangida (ota element rangini oladi). Ölçam: sm 16 · md 20 · lg 36. Kengaytma: data-variant=dots (uç nuqta), .fx-spinner-text (matn bilan inline). Şakl morfli variant (4.43, M3 Expressive): data-variant="morph" — brend rangidagi şakl navbat bilan boşqasiga oqib ötadi (portlaş → peçenye → beşburçak → kapsula → quyoş → tört barg) va prujina bilan aylanadi; .fx-spinner-shell — yumşoq doira fon içida. Uzoqroq kutiş (hisobot, AI javobi) uçun; harakat kamaytirilsa şakl joyida turadi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smmdlg | md |
data-variant | dotsmorph Şakl morfli (4.43) | — |
Anatomiya
- root
.fx-spinnerşart - text
.fx-spinner-textixtiyoriy - shell
.fx-spinner-shellixtiyoriy
Klaviatura va kiriş
role="status" + aria-label.
Kod
AI uçun: qaçon işlatiladi
npx foxui add spinner
<span class="fx-spinner" role="status" aria-label="Yuklanmoqda"></span> <span class="fx-spinner" data-size="lg" role="status" aria-label="Hisobot tayyorlanmoqda"></span> <span class="fx-spinner-text" role="status"><span class="fx-spinner" data-variant="dots" aria-hidden="true"></span>Saqlanmoqda…</span> <span class="fx-spinner-text" role="status" style="margin-block-start:var(--fx-space-4)"><span class="fx-spinner" data-variant="morph" aria-hidden="true"></span>Hisobot yiğilmoqda…</span> <span class="fx-spinner-shell" role="status" aria-label="AI javob tayyorlamoqda"><span class="fx-spinner" data-variant="morph" data-size="lg" aria-hidden="true"></span></span>
Tokenlar: --fx-bg-brand-subtle --fx-border-width-focus --fx-duration-pulse --fx-duration-spin --fx-ease-spring --fx-ease-standard --fx-font-size-sm --fx-radius-circle --fx-size-avatar-lg --fx-size-avatar-md --fx-size-icon-lg --fx-size-icon-md --fx-size-icon-sm --fx-space-2 --fx-text-brand --fx-text-secondary