Bileşenler

ProgressBar

Bir görevin ne kadar ilerlediğini gösteren ya da kalan süre bilinmezken kayan çubuk.

Durumlar

Durum	Görsel değişiklik	Token’lar
Belirli	Katman zemininde ray; dolgu değere göre, `success`, `warning` ve `danger` tonlarında durum rengiyle	`color-surface-layer-2`, `color-action-primary-default`, `color-status-*-emphasis`
Belirsiz	Üçte bir genişlikte kayan dolgu	`period-indeterminate`
Başarı / hata	Durum renginde dolgu	`color-status-success-emphasis`, `color-status-danger-emphasis`

Özellik	Değer	Token
Ray kalınlığı	4 px (varsayılan `sm`) / 8 px	`progress-height-sm`, `progress-height-md`
Etiket ile ray arası	12 px	`space-lg`
Etiket / değer	`label-md` / `body-md` (`text-subtle`)	`text.label-md`, `text.body-md`
Köşe	Ray ve dolgu tam yuvarlak; dolgu her değerde yuvarlak uçlu kalır	`radius-full`

warning tonu dolguyu status-warning-emphasis ile çizer; sınırına yaklaşan bir kota içindir.

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Açık mod	Koyu mod
`--bigbang-progress-height-sm`	`4px4px4px`	`4px4px4px`
`--bigbang-progress-height-md`	`8px8px8px`	`8px8px8px`
`--bigbang-color-surface-sunken`	`#f5f5f5#f5f5f5#f5f5f5`	`#171717#171717#171717`
`--bigbang-color-action-primary-default`	`#146d83#171717#171717`	`#77bacf#e5e5e5#e5e5e5`
`--bigbang-color-status-success-emphasis`	`#2da264#2da264#2da264`	`#7dd09b#7dd09b#7dd09b`
`--bigbang-color-status-danger-emphasis`	`#e1595b#e1595b#e1595b`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-motion-progress-duration`	`0.15s0.15s0.15s`	`0.15s0.15s0.15s`
`--bigbang-period-indeterminate`	`1.5s1.5s1.5s`	`1.5s1.5s1.5s`

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Dolgu (`motion.progress`)	`scale` (x ekseni)	`motion-progress-duration`	`easing-productive`	Kısa sürer.
Kayma (`motion.indeterminate`)	`translate`, sonsuz döngü	`period-indeterminate`	`easing-linear`	Durur; tam genişlikte soluk çubuk.

Değerler için Hareket sayfasına bakın.