Progress

Atom

Determinate progress indicator as a bar or a circle, with variant colors and an optional percentage label.

Preview

62%

90%

Code

<Progress value={30} />
<Progress value={62} variant="warning" showLabel />
<Progress value={90} variant="success" size="lg" showLabel />

Preview

40%

75%

Code

<Progress value={40} shape="circle" showLabel />
<Progress value={75} shape="circle" variant="success" size="lg" showLabel />