Progress

Bir işin ne kadar ilerlediğini gösteren yatay çubuk: dosya yükleme, dışa aktarma, ilk kurulum listesi gibi. Değer verilmezse belirsiz bir yükleniyor çubuğuna dönüşür.

<Progress aria-label="Yükleme" value={64} />

Import

import { Progress } from "@merid/react";

Örnekler

Boyutlar

Kalınlıklar: sm 4px, md 6px (varsayılan), lg 8px.

<Progress aria-label="Küçük" size="sm" value={40} />
<Progress aria-label="Orta" size="md" value={60} />
<Progress aria-label="Büyük" size="lg" value={80} />

Belirsiz

Süre bilinmiyorsa value verme (ya da null ver).

<Progress aria-label="Dışa aktarma hazırlanıyor" />

Özel max ve değer metni

max ölçeği değiştirir; valueText, ekran okuyucuların okuduğu varsayılan yüzdenin yerine geçer.

<Progress aria-label="İlk kurulum" value={3} max={5} valueText="5 adımdan 3’ü" />

Değer güncelleme

Değerler 0 ile max arasına sıkıştırılır. Çubuk %100'e ulaşınca data-state="complete" olur.

const [value, setValue] = useState(0);
// iş ilerledikçe value'yu güncelle

<Progress aria-label="Eşitleniyor" value={value} />

API referansı

role="progressbar" olan bir div render'lar; ref ve diğer div attribute'ları bu elemana iletilir.

Stil verme

Component değişkenleri: --mrd-progress-height (boyuta göre ayarlanır) ve --mrd-progress-value (doluluk yüzdesi, inline verilir).

Erişilebilirlik

• aria-valuemin, aria-valuemax, aria-valuenow ve aria-valuetext ile birlikte role="progressbar". Belirsiz state'te hiçbir aria-value* attribute'u verilmez.
• Çubuğa her zaman aria-label ya da aria-labelledby ile bir ad ver; elemanın kendi metni yoktur.
• prefers-reduced-motion açıkken belirsiz animasyon kaldırılır.

Kullanım ilkeleri

İlgili sayfalar

• Spinner: küçük, belirsiz yükleniyor göstergesi.
• Skeleton: içerik yüklenirken yer tutucu.
• Stepper: adları olan adımlar üzerinden ilerleme.