Progress Component

Progress bar with dynamic width, height, colors, stripes, gradient, and animation. Uses [data-role=bar] for the filled portion and --progress-value or progress-* class for width.

Notes

Base: .progress. Set value via style="--progress-value: 60%" , class progress-60 or class progress-[60%].
The [data-role=bar] child renders the filled bar. Text inside is centered automatically.
Use [data-role=base] for a background label when the bar is too narrow to show text.
Size: progress-2xs (4px) to progress-5xl (40px) — default is progress-md (16px).

Basic usage

With text

25%

50%

75%

100%

Without text

Using progress-* value class

20%

45%

80%

With [data-role=base] (narrow values)

40%

Sizes

4px (progress-2xs)

8px (progress-xs)

12px (progress-sm)

16px (progress-md, default)

60%

20px (progress-lg)

60%

24px (progress-xl)

60%

28px (progress-2xl)

60%

32px (progress-3xl)

60%

36px (progress-4xl)

60%

40px (progress-5xl)

60%

Shapes

progress-rounded

Rounded

progress-pill

Circle

progress-square

Square

progress-fluid

Fluid

Theme colors

Primary / Secondary / Tertiary

Primary

Secondary

Tertiary

Success / Error / Info

Success

Error

Info

Highlight / Warning / Caution

Highlight

Warning

Caution

Ink / Title / Description / Caption / Disabled

Ink

Title

Description

Caption

Disabled

Custom colors

Multiple color formats are supported:

1. Theme semantic colors, e.g. *-error, *-error-hover
2. Tailwind built-in colors, e.g. *-indigo-500
3. Raw color values, e.g. *-[#ff0000]
4. CSS named colors, e.g. *-[red], *-[green]

Tailwind colors

blue-500

green-500

Raw / named colors

[#ff0000]

[blue]

Stripes

progress-stripes

30%

55%

80%

Warning

Highlight

Gradient

progress-gradient (static)

30%

55%

80%

progress-gradient + progress-animated

40%

65%

90%

progress-gradient + progress-animated-reverse

35%

60%

85%

Stripes + Animated

progress-stripes + progress-animated

35%

60%

85%

progress-stripes + progress-animated-reverse

40%

65%

90%

Loading (progress-spinner)

Indeterminate loading (no [data-role=bar] needed)

progress-spinner with different sizes

progress-spinner with different shapes

Use cases

File upload progress

photo.jpg75%

document.pdf45%

video.mp4100%

System resource usage

CPU32%

Memory67%

Disk89%

Password strength

Weak25%

Medium55%

Strong85%