Progress

Progress is a replacement for the native <progress> element. It displays a linear bar. It uses a regular div under the hood.

We may opt for a striped bar, or even an animated striped bar.

simple progress bar

• value: from 0 to 100
• size: the vertical size, aka how thick it is. Defaults to 8px through default md.
• radius: defaults to 4px through default sm. The default size and radius lead to a perfect semi circle border.
• color: defaults to blue
• animated: enable a striped pattern and animate the stripes.
• striped: enable a striped pattern.
• transitionDuration: set the duration of the animation that occurs when the value changes, in ms. Defaults to 100.

<Progress value={50} />

compound progress bar • segmented bar

We may have several segments.

• The container is Progress.Root
• Each segment is a Progress.Section
• We may add a segment label with Progress.Label

We may make the label have a smart color with autoContrast.

<Progress.Root>
    <Progress.Section value={20} color="indigo">
        <Progress.Label>Documents</Progress.Label>
    </Progress.Section>
    <Progress.Section value={50} color="orange">
        <Progress.Label>Photos</Progress.Label>
    </Progress.Section>
</Progress.Root>