Progress

Renders a horizontal progress bar. Use value for a simple single-color bar, or sections for a compound multi-color bar. Supports striped and animated patterns, labels, and configurable size and radius.

Basic

<Progress value={30} />
<Progress value={60} color="violet" />
<Progress value={90} color="green" />

With label

65%
<Progress value={65} label="65%" size="xl" />

Striped and animated

<Progress value={50} striped />
<Progress value={50} striped animated color="blue" />

Multi-section (compound)

<Progress
  sections={[
    { value: 30, color: 'blue', tooltip: 'Blue: 30%' },
    { value: 25, color: 'violet', tooltip: 'Violet: 25%' },
    { value: 20, color: 'green', tooltip: 'Green: 20%' },
    { value: 10, color: 'orange', tooltip: 'Orange: 10%' },
  ]}
  size="lg"
/>

Sizes

<Progress value={60} size="xs" />
<Progress value={60} size="sm" />
<Progress value={60} size="md" />
<Progress value={60} size="lg" />
<Progress value={60} size="xl" />

Props

PropTypeDefaultDescription
valuenumber—Percentage filled for a single-section bar (0–100)
colorstring—Fill color for the single-section bar
size'xs'|'sm'|'md'|'lg'|'xl'|number|string—Height of the bar
radius'xs'|'sm'|'md'|'lg'|'xl'|string—Border-radius of the bar and segment ends
stripedboolean—Applies a diagonal stripe pattern
animatedboolean—Animates the stripe pattern (requires striped)
labelstring—Text label rendered inside the filled portion
sectionsProgressSection[]—Array of segment definitions for a compound bar
classstring—Additional CSS class names
styleobject—Inline styles