Holat va javob · molecule
Yuklaniş qoplamasi
Blok ustida xira qatlam + aylana: kontent joyida qoladi, ota aria-busy="true" bölsa körinadi. Variantlar: xira (andoza), blur, butun sahifa.
Haftalik hisobot
24 ta yangi ariza, 6 ta yopilgan bitim.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | blur | dim |
data-scope | page butun ekran | block |
Anatomiya
- root
.fx-loadingşart - content
.fx-loading__contentixtiyoriy - overlay
.fx-loading__overlayşart - text
.fx-loading__textixtiyoriy
Holatlar
busy
Klaviatura va kiriş
Ota aria-busy="true"; matn role="status"; ostidagi kontent inert. Yuklaniş tugagaç aria-busy olib taşlanadi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Mavjud kontent qayta yuklanayotganda (filtr, yangilaş).
Işlatmang
- Birinçi yuklaniş →
skeleton - Tugma içidagi jarayon →
button - Sahifalararo ötiş →
toploader - Ostidagi kontentni inert qilmay qoldirmang — fokus va bosiş yaşirin elementga ketadi.
- Birinçi yuklanişda qoplama emas — skelet (kontent şaklini körsatadi).
- Butun sahifa qoplamasini 1 soniyadan qisqa jarayonga qöymang — miltillaydi.
npx foxui add loading
<div class="fx-loading" aria-busy="true">
<div class="fx-loading__content" inert>
<div class="fx-card"><p class="fx-card__title">Haftalik hisobot</p><p class="fx-card__text">24 ta yangi ariza, 6 ta yopilgan bitim.</p></div>
</div>
<div class="fx-loading__overlay">
<span class="fx-spinner" aria-hidden="true"></span>
<p class="fx-loading__text" role="status">Yangilanmoqda…</p>
</div>
</div>Tokenlar: --fx-bg-page --fx-ease-enter --fx-ease-exit --fx-font-size-sm --fx-motion-base --fx-motion-exit-fast --fx-space-1 --fx-space-2 --fx-text-secondary
Şu toifadan
OgohlantirişBölim yoki sahifadagi muhim xabar: töla tusli yuza, holat belgisi (şakl), sarlavha, matn, bitta havola, ixtiyoriy yopiş.Tasdiqlaş sörovi (ruxsat / rad)Agent xavfli yoki qaytarib bölmaydigan amaldan oldin ruxsat söraydi: savol, nima özgarişi (tafsilot) va Ruxsat beriş / Rad etiş / Har doim ruxsat.BannerButun kenglikdagi sayt e'loni (texnik işlar, obuna tugadi): holat belgisi (şakl), qisqa matn, bitta havola, yopiş.Portlaş va konfettiYoqtiriş va muvaffaqiyat uçun qisqa, bir martalik quvonç effektlari (Magic UI Confetti, Twitter «yoqdi»).Boşlaş röyxatiYangi foydalanuvçi uçun onboarding kartasi: jarayon çiziği va «2 / 5», qadamlar röyxati.Cookie roziligiCookie va kuzatuv roziligi naqşi (4.180, GOV.UK Cookie banner; GDPR 2-bosqiç uçun): pastki karta — nima uçun cookie kerakligi bir-ikki gapda, «Qabul qiliş», «Rad etiş» (bir xil vaznli — rad etiş yaşirilmaydi) va «Sozlaş».