Progress Bar

Visual Effects

An animated progress bar with multiple sizes, optional label and value display, custom colors, and candy-stripe animation.

Loading preview...

Customize

Size:

Value

Max

100

Label

Show Value

Animated Stripes

Props

Prop	Type	Default	Description
`value`	`number`	`—`	Current progress value.
`max`	`number`	`100`	Maximum value for the progress bar.
`label`	`string`	`undefined`	Text label displayed above the bar.
`showValue`	`boolean`	`false`	Show the percentage value next to the label.
`color`	`string`	`undefined`	Custom background color for the fill. Defaults to ignite.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Height of the progress bar.
`animated`	`boolean`	`true`	Show animated candy-stripe overlay.
`className`	`string`	`''`	Additional CSS classes.