ProgressBar

Shows progress of an operation over time, built on React Aria's ProgressBar. For a static measurement rather than work in flight, use Meter.

import { ProgressBar } from "@pockets-ui/components"

Basic

Loading…45%

Code

import { ProgressBar } from "@pockets-ui/components"

export default function ProgressBarBasic() {
  return <ProgressBar label="Loading…" value={45} />
}

Custom value scale

Step 3 of 43

Code

import { ProgressBar } from "@pockets-ui/components"

export default function ProgressBarCustomScale() {
  return (
    <ProgressBar
      label="Step 3 of 4"
      value={3}
      minValue={0}
      maxValue={4}
      formatOptions={{ style: "decimal" }}
    />
  )
}

Indeterminate

Drop value and pass isIndeterminate when the total amount of work isn't known yet — the bar animates instead of filling to a position.

Uploading…

Code

import { ProgressBar } from "@pockets-ui/components"

export default function ProgressBarIndeterminate() {
  return <ProgressBar label="Uploading…" isIndeterminate />
}

No visible label

When surrounding copy already names the operation, swap label for aria-label so the bar is still announced without a duplicate visible label.

70%

Code

import { ProgressBar } from "@pockets-ui/components"

export default function ProgressBarNoVisibleLabel() {
  return <ProgressBar aria-label="Download progress" value={70} />
}