Progress

Progress is a replacement for the native <progress> element: It displays one or more bars over a horizontal track. It uses a regular div under the hood.

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

Progress's root is the track while Progress's section are the bar(s) displayed over it.

simple progress bar

We set one or more of the following props:

• 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} />

opt for a compound progress bar, with several segments

We can split the bar into several sections, with subcomponents:

• The container is Progress.Root
• Each segment is a Progress.Section
• We may add a segment label with Progress.Label. We can make the label have a smart text color with autoContrast.

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