Progress

import { Flex } from "@hel/ui/flex"
import {
  Progress,

When to use it#

Use a progress bar for something that is happening and will end: a file upload, an import, a multi-step setup. It tells people the task is alive, and roughly how long is left.

For a value that just is, such as storage used or a score, use a Meter. For a wait where you cannot say how far along it is, use a Spinner. If the content is coming, a Skeleton is better.

Import#

Copyimport {
  Progress,
  ProgressBar,
  ProgressLabel,
  ProgressValue,
} from "@hel/ui/progress"

Anatomy#

Progress holds the value, from 0 to 100. ProgressBar is the bar. ProgressLabel and ProgressValue are optional, the name and the percentage, and you place them where you like, usually in a row above the bar.

Copy<Progress value={54} className="w-72">
  <Flex justify="between" align="center" className="w-full">
    <ProgressLabel>Uploading statement.pdf</ProgressLabel>
    <ProgressValue />
  </Flex>
  <ProgressBar />
</Progress>

The bar is as wide as its container, so give it a width with className. When you leave the label out, give the progress an aria-label, so screen readers know what it measures. ProgressBar has two sizes, sm, the default, and lg.

Examples#

Changing over time#

Keep the value in state and update it as the task reports back. When the task is done, say so in the label, as this example does, instead of leaving a full bar on its own.

import * as React from "react"

import { Button } from "@hel/ui/button"

Props#

Progress#

It also takes every prop of the Base UI progress.

ProgressBar#