Holat va javob · pattern
Splash ekran
PWA yoki ilova birinçi oçilayotganda körinadigan ekran (4.200, HIG «Launch screen»): markazda belgi va ilova nomi (kirişda yumşoq paydo böladi, keyin sekin «nafas oladi»), ostida yuklaniş çiziği va holat matni («Ma'lumotlar sinxronlanmoqda…»), pastda versiya. Çiziq role="progressbar": aria-valuenow va --fx-splash-value berilsa — aniq, berilmasa — noaniq. Ilova tayyor bölgaç data-state="done" qöyadi — ekran sönadi va bosilmaydi. data-size: screen (standart — fixed, butun ekran, eng yuqori qatlam) yoki block (hujjat namunasi). data-tone: page yoki brand (brend rangli fon — manifest'dagi background_color bilan bir xil qiling, oq miltillaş bölmasin).
FoxOS
Vazifalar sinxronlanmoqda…
v2.4.0 · Toşkent
Mehr Klinikasi
Navbatlar yuklanmoqda…
Şifokorga yoziliş — 24/7
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | screenblock hujjat namunasi | screen |
data-tone | pagebrand brend rangli fon | page |
Anatomiya
- root
.fx-splashşart - center
.fx-splash__centerşart - mark (logo)
.fx-splash__markşart - name
.fx-splash__nameixtiyoriy - progress (role=progressbar)
.fx-splash__progressixtiyoriy - status (role=status)
.fx-splash__statusixtiyoriy - foot (versiya)
.fx-splash__footixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| — | Fokuslanadigan element yöq; yuklaniş tugagaç fokus ilovaga ötadi |
Ildiz aria-busy="true" va aria-label (nima yuklanayotgani); çiziq role="progressbar" (aniq bölsa aria-valuenow); holat matni role="status" — özgarganda aytiladi. Belgi bezak (aria-hidden), nom matnda. Çeksiz «nafas» va yuguruvçi çiziq --fx-knob-motion-loop'ga boğliq va harakat kamaytirilganda töxtaydi. Tayyor bölgaç visibility: hidden — ekran öquvçi va fokus uçun ham yöqoladi.
Kod
AI uçun: qaçon işlatiladi
- PWA va mobil-veb ilovaning birinçi yuklanişi (keş, sinxron).
- Kabinetga kirgandan keyin ma'lumot tayyorlanayotgan qisqa lahza.
- Sahifa içidagi mazmun yuklanişi →
skeleton - Sahifalar orasida ötiş →
toploader - Tugma içida kutiş →
spinner - Splashni reklama yoki «körsatiş» uçun uşlab turmang — ilova tayyor bölişi bilan data-state="done".
- Har oçilişda uzun animatsiya qöymang — 1–2 soniyadan oşsa, haqiqiy mazmun skeletini körsating.
- Fon rangini manifest'dagi background_color'dan farqli qilmang — oq miltillaş körinadi.
npx foxui add splash
<div class="fx-splash" data-size="block" aria-busy="true" aria-label="FoxOS yuklanmoqda">
<div class="fx-splash__center">
<span class="fx-splash__mark" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" aria-hidden="true"><path d="M4 4l5 4h6l5-4v9a8 8 0 0 1-16 0z"/><path d="M9.5 13h.01M14.5 13h.01" stroke-linecap="round" stroke-width="2.4"/></svg></span>
<p class="fx-splash__name">FoxOS</p>
<div class="fx-splash__progress" role="progressbar" aria-label="Yuklaniş" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--fx-splash-value: 64%"></div>
<p class="fx-splash__status" role="status">Vazifalar sinxronlanmoqda…</p>
</div>
<p class="fx-splash__foot">v2.4.0 · Toşkent</p>
</div>
<div class="fx-splash" data-size="block" data-tone="brand" aria-busy="true" aria-label="Mehr Klinikasi ilovasi yuklanmoqda" style="margin-block-start: var(--fx-space-8)">
<div class="fx-splash__center">
<span class="fx-splash__mark" aria-hidden="true">M</span>
<p class="fx-splash__name">Mehr Klinikasi</p>
<div class="fx-splash__progress" role="progressbar" aria-label="Yuklaniş"></div>
<p class="fx-splash__status" role="status">Navbatlar yuklanmoqda…</p>
</div>
<p class="fx-splash__foot">Şifokorga yoziliş — 24/7</p>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-muted --fx-bg-page --fx-bg-surface --fx-border-color-default --fx-border-width-default --fx-duration-indeterminate --fx-duration-pulse --fx-duration-stagger --fx-ease-emphasized --fx-ease-exit --fx-ease-standard --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-sm --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-semibold --fx-knob-motion-loop --fx-motion-base --fx-motion-scale-enter --fx-motion-slow --fx-motion-slower --fx-radius-overlay --fx-radius-pill --fx-shadow-lg --fx-space-1 --fx-space-12 --fx-space-4 --fx-space-6 --fx-space-8 --fx-splash-value --fx-text-on-brand --fx-text-primary --fx-text-tertiary --fx-z-toast