Progress

Track height

Sizes

From a 4px hairline to a 12px bar.

Extra small · xs24%

Small · sm42%

Medium · md68%

Large · lg86%

Semantic tones

Colors

Accent by default, plus success, warning and danger.

Accent — Storage used61%

Success — Onboarding100%

Warning — Sync backlog54%

Danger — Error budget19%

Texture

Striped & Animated

A diagonal weave, optionally marching to signal active work.

Striped72%

Striped + animated — Importing47%

Indeterminate — Connectingno fixed length

Inline value

Labeled

The bar and its mono value share one row via __value.

CPU

38%

Memory

73%

Disk

91%

Bandwidth

22%

Breakdown

Stacked

Several segments share one track to show composition.

Storage by type412 GB / 500 GB

Images 190 GB Video 120 GB Docs 70 GB Other 32 GB

Deal pipeline$284K

Radial

Circular

Ring track + value center.

76% Sprint

92% SLA