Geri bildirim · Progress

İlerleme çubuğu

Süresi bilinen bir işlemin ne kadarının bittiğini gösterir.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Dosya yükleme Canlı örnek

ikametgah.pdf yükleniyor %60

%60

HTML kodunu göster

<div class="trds-ilerleme">
  <div class="trds-ilerleme__ust">
    <span id="ilerleme-etiket">ikametgah.pdf yükleniyor</span>
    <span class="trds-ilerleme__deger">%60</span>
  </div>
  <progress class="trds-ilerleme__cubuk" value="60" max="100" aria-labelledby="ilerleme-etiket">%60</progress>
</div>

Daire Canlı örnek

%70

HTML kodunu göster

<div class="trds-ilerleme-daire" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" aria-label="Yükleme" style="--trds-ilerleme: 70"><span class="trds-ilerleme-daire__deger">%70</span></div>

Ne zaman kullanılır

Dosya yükleme gibi yüzdesi bilinen işlemlerde kullanın.
Çok adımlı bir formda kullanmayın. Orada adım göstergesi kullanın.

Erişilebilirlik

Yerel <progress> öğesi kullanılır. Değeri ekran okuyucu yüzde olarak okur.
Yüzde metin olarak da yazılır. Çubuk tek başına yeterli değildir.
Etiket aria-labelledby ile bağlanır.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 4.1.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: IE, JP, DE, NO.