Holat va javob · molecule

Progress

Çiziqli ölçagiç, balandligi 8. Qiymat CSS özgaruvçisida: style="--fx-progress-value: 40%". Rang: standart (brend), data-tone success/warning/error yoki data-color (toifa rangi). Qiymat noma'lum bölsa (aria-valuenow yöq) — bölak trekda sirpanadi. Ölçamlar xs/sm/lg; yorliq + qiymat qatori (.fx-progress-row); köp bölakli (data-variant="stacked", .fx-progress__seg — rol bilan). Aylana (data-shape="circle"): halqa, markazda foiz yoki ikon; aniq va noaniq holat; uç ölçam. Tölqinli variant (4.42, M3 Expressive): data-variant="wavy" — tölgan qism tölqinsimon çiziq, qolgan yöl tekis trek (oraliğida böşliq); 100 %da tölqin tinçlanadi. Aylana bilan (data-shape="circle") — halqaning özi tölqinsimon. Aniq qiymatda tölqin statik, noaniq holatda bölak sirpanadi. Aniq qiymatda trek tölgan qismdan kiçik böşliq bilan boşlanadi va öng uçida tugaş nuqtasi turadi (M3 stop indicator) — iş qayerda tugaşi körinadi; 100 % da yöqoladi.

beta0.2.0 danyangilandi 0.29.2.fx-progressFaqat CSS

Oylik reja64 %

128 mln / 200 mln söm

72%

100%

Mijozlar bazasi import qilinmoqda64 %

72 %

Variantlar

Atribut	Qiymatlar	Standart
`data-tone`	`brand` `success` `warning` `error`	`brand`
`data-color`	`yellow` `pink` `blue` `coral` `green` `purple`	—
`data-size`	`xs` `sm` `md` `lg`	`md`
`data-variant`	`single` `stacked` Köp bölakli, role=img + aria-label `wavy` Tölqinli (4.42): çiziqli yoki data-shape=circle bilan	`single`
`data-role`	`brand` `ink` `accent` `risk` `context`	`brand`
`data-shape`	`line` `circle` Halqa; içida .fx-progress__label (foiz yoki ikon)	`line`

Anatomiya

root.fx-progressşart
row.fx-progress-rowixtiyoriy
row-head.fx-progress-row__headixtiyoriy
row-label.fx-progress-row__labelixtiyoriy
row-value.fx-progress-row__valueixtiyoriy
row-hint.fx-progress-row__hintixtiyoriy
segment.fx-progress__segixtiyoriy
label.fx-progress__labelixtiyoriy

Holatlar

indeterminate

Klaviatura va kiriş

role="progressbar" + aria-valuenow/min/max + aria-label. --fx-progress-value va aria-valuenow bir xil bölsin.

Kod

AI uçun: qaçon işlatiladi

Işlating

Jarayon yoki uluş foizini körsatiş.

Işlatmang

Foiz halqasi (donut) → progress
Dashboard grafigida foizni halqa bilan körsatmang — çiziqli ölçagiç (WDS «Grafiklar»); aylana (data-shape="circle") faqat ixçam joyda jarayon yoki bitta kvota uçun.
Qiymatni faqat çiziq bilan bermang — yonida raqam bölsin.
Köp bölakli çiziqda bölaklar yiğindisi 100 % dan oşmasin; har bölakni legendada (fx-legend) nomlang.
Ikki bölakdan köp rolga tayanib, rang yolğiz belgi bölmasin — yonida son yoki legenda.

npx foxui add progress

<div class="fx-progress" role="progressbar" aria-label="Kredit sarfi" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100" style="--fx-progress-value: 42%"></div>
<div class="fx-progress" data-tone="warning" role="progressbar" aria-label="Disk" aria-valuenow="81" aria-valuemin="0" aria-valuemax="100" style="--fx-progress-value: 81%"></div>
<div class="fx-progress" data-color="purple" role="progressbar" aria-label="Vazifa" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="--fx-progress-value: 60%"></div>
<div class="fx-progress" role="progressbar" aria-label="Yuklanmoqda"></div>

<!-- Yorliq + qiymat -->
<div class="fx-progress-row">
  <div class="fx-progress-row__head"><span class="fx-progress-row__label" id="pr1">Oylik reja</span><span class="fx-progress-row__value">64 %</span></div>
  <div class="fx-progress" data-size="sm" role="progressbar" aria-labelledby="pr1" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" style="--fx-progress-value: 64%"></div>
  <span class="fx-progress-row__hint">128 mln / 200 mln söm</span>
</div>

<!-- Koʻp boʻlakli: disk -->
<div class="fx-progress" data-variant="stacked" data-size="lg" role="img" aria-label="Disk 100 GB dan 72 GB band: rasmlar 40, video 24, boşqa 8">
  <span class="fx-progress__seg" data-role="ink" style="--fx-progress-value: 40%"></span>
  <span class="fx-progress__seg" data-role="accent" style="--fx-progress-value: 24%"></span>
  <span class="fx-progress__seg" data-role="context" style="--fx-progress-value: 8%"></span>
</div>

<!-- Aylana (4.114) -->
<div class="fx-progress" data-shape="circle" role="progressbar" aria-label="Profil töldirilgan" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="--fx-progress-value: 72%"><span class="fx-progress__label">72%</span></div>
<div class="fx-progress" data-shape="circle" data-size="lg" data-tone="success" role="progressbar" aria-label="Oylik reja bajarildi" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="--fx-progress-value: 100%"><span class="fx-progress__label">100%</span></div>
<div class="fx-progress" data-shape="circle" data-size="sm" data-tone="warning" role="progressbar" aria-label="Disk" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100" style="--fx-progress-value: 88%"></div>
<div class="fx-progress" data-shape="circle" role="progressbar" aria-label="Fayl yuklanmoqda"><span class="fx-progress__label"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M128 40v120m-48-72 48-48 48 48M48 200h160" fill="none" stroke="currentColor" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/></svg></span></div>
<div class="fx-progress-row" style="max-inline-size:24rem;margin-block-start:var(--fx-space-4)"><div class="fx-progress-row__head"><span class="fx-progress-row__label">Mijozlar bazasi import qilinmoqda</span><span class="fx-progress-row__value">64 %</span></div><div class="fx-progress" data-variant="wavy" role="progressbar" aria-label="Import" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" style="--fx-progress-value: 64%"></div></div>
<div class="fx-progress" data-variant="wavy" data-tone="success" role="progressbar" aria-label="Zaxira nusxa tayyor" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="--fx-progress-value: 100%;max-inline-size:24rem;margin-block-start:var(--fx-space-3)"></div>
<div class="fx-progress" data-variant="wavy" role="progressbar" aria-label="Hisobot tayyorlanmoqda" style="max-inline-size:24rem;margin-block-start:var(--fx-space-3)"></div>
<div class="fx-progress" data-shape="circle" data-variant="wavy" data-size="lg" role="progressbar" aria-label="Profil töldirilgan" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="--fx-progress-value: 72%;margin-block-start:var(--fx-space-4)"><span class="fx-progress__label">72 %</span></div>

Tokenlar: --fx-bg-brand-solid --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-muted --fx-bg-surface --fx-border-width-focus --fx-control-h-lg --fx-control-h-sm --fx-duration-indeterminate --fx-duration-pulse --fx-duration-spin --fx-ease-standard --fx-fg-error --fx-fg-success --fx-fg-warning --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-knob-motion-loop --fx-motion-base --fx-radius-circle --fx-radius-pill --fx-size-icon-md --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-primary --fx-text-secondary --fx-text-tertiary --fx-viz-accent --fx-viz-brand --fx-viz-context --fx-viz-ink --fx-viz-risk

Ş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ş».

Progress

Variantlar

Anatomiya

Holatlar

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik