ProgressBar

Ne zaman kullanılır

ProgressBar, birkaç saniyeden uzun süren bir görevin ilerlemesini göstermek içindir: dosya yükleme, içe aktarma, çok adımlı bir işlem.

Ne zaman kullanılmaz

• Bir saniyeden kısa beklemeler için: Hiçbir şey göstermeyin.
• Bir butonun ya da küçük bir alanın yüklenmesi için: Spinner ya da butonun loading durumu.
• İçerik yüklenirken: Skeleton kullanın.
• Bir formdaki adımları göstermek için: Adım göstergesi kullanın.

Anatomi

Dosyalar aktarılıyor%30

Yaklaşık 2 dakika kaldı

x

AçıkKoyu

Kodu kopyala

import { ProgressBar } from '@bigbang/ui';

export default function WithDescription() {
  return <ProgressBar label="Dosyalar aktarılıyor" value={3} max={10} valueText="10 dosyadan 3'ü" description="Yaklaşık 2 dakika kaldı" />;
}

1. Etiket.
2. Değer: Yüzde.
3. Ray.
4. Dolgu.
5. Açıklama: İsteğe bağlı.

Davranış

• Değer değişince dolgu yumuşakça büyür.
• value verilmezse çubuk kayar; değer bilinince belirli hale geçer.
• Yazı yönü sağdan sola olunca dolgu sağdan başlar.

Yönergeler

• Etiketi süren işle adlandırın.
• İlerleme ölçülebiliyorsa belirli çubuk kullanın.
• Tamamlanınca başarı tonuna geçin ya da çubuğu sonuçla değiştirin.

İçerik

Türkçe	İngilizce
Dosya yükleniyor	Uploading file
Yaklaşık 2 dakika kaldı	About 2 minutes left

İlgili bileşenler

• Spinner: Küçük, belirsiz yükleme.
• Skeleton: Yüklenen içeriğin yer tutucusu.
• Toast: Bitince sonucu bildirmek için.