Progress

Linear progress bars visualize task completion. They support percentage labels, custom colors, and animated transitions.

Basic

tsx

<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />

With Percentage Label

Progress33%

Progress67%

Progress100%

tsx

<Progress value={67} showLabel />

Color Variants

Default (gradient)

Success

Warning

Danger

Info

tsx

<Progress value={85} color="#16a34a" />
<Progress value={45} color="#d97706" />
<Progress value={15} color="#dc2626" />

Custom Heights

4px (thin)

8px (default)

16px (large)

tsx

<Progress value={60} height={4} />
<Progress value={60} height={16} />

Animated Demo

Click the button to see the progress bar animate from 0 to 100%.

Progress0%

tsx

const [value, setValue] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    setValue(prev => Math.min(prev + 2, 100));
  }, 60);
  return () => clearInterval(interval);
}, []);

<Progress value={value} showLabel />

Props

Prop	Type	Default	Description	Required
value	`number`	-	Current progress value	No
max	`number`	100	Maximum value	No
showLabel	`boolean`	false	Show percentage text above the bar	No
height	`number`	8	Bar height in pixels	No
color	`string`	primary gradient	Fill color or CSS gradient	No

Usage Guidelines

Use progress bars when the completion percentage is known. For indeterminate loading, use skeletons.
Show the percentage label for long-running tasks to set user expectations.
Use semantic colors to indicate status: green for healthy, red for critical, etc.
The thin (4px) variant works well inside table rows or compact UIs.