Components/Progress

Progress

Linear and circular progress bars with color variants.

Installation

Examples

Linear progress

Bar with label and color variants.

Progress68%
Progress90%
Progress45%
Progress20%

Circular progress

SVG ring with center label.

72%
45%
90%

API Reference

PropTypeDefaultDescription
valuenumber0Current progress value (0–100).
maxnumber100Maximum value.
variant'linear'|'circular''linear'Progress shape.
size'sm'|'md'|'lg''md'Controls bar height or ring size.
color'primary'|'success'|'warning'|'danger''primary'Color variant.
labelstringAccessible label.