Progress

InstallationCopy Anchor Link

npx shadcn@latest add @quireui/progress

UsageCopy Anchor Link

<Progress label="Uploading receipts" value={done} max={12} valueLabel={`${done} of 12`} />

The fill glides between values, so progress that arrives in bursts still moves smoothly, and it slides rather than growing, so it never animates width. When it reaches the end the bar turns green and the number becomes a check and "Done", stamped in so the finish is noticed.

Unknown and step by stepCopy Anchor Link

value={null} is for work whose length is unknown: the bar sweeps. Keep valueLabel for what is happening, like "Counting invoices". steps splits the bar into segments, for flows like onboarding.

MeterCopy Anchor Link

Meter is for an amount within a range, not work in progress: storage, seats, plan usage. It turns amber from 80% and red from 95%, so running out reads before it happens. Change the points with thresholds, turn them off with thresholds={false}, or fix a colour with tone.

StackedCopy Anchor Link

MeterStack shows several parts of one total in a single bar, with a legend, like storage by type. Hover a part or its legend entry and it comes forward while the rest quiet down.

<MeterStack
  label="Storage"
  max={10}
  valueLabel="7.2 GB of 10 GB"
  parts={[
    { label: "Invoices", value: 3.1, tone: "info", valueLabel: "3.1 GB" },
    { label: "Receipts", value: 2.4, tone: "success", valueLabel: "2.4 GB" },
  ]}
/>

AccessibilityCopy Anchor Link

Progress and meters are read-only: they take no focus. Screen readers read them as a progress bar or a meter, with their label and the value text you see, like "5 of 12" or "7.2 GB of 10 GB", rather than a bare percentage.

MotionCopy Anchor Link

The fill eases to each new value in 220ms. An unknown amount sweeps across every 1.4 seconds. Under reduced motion the fill jumps straight to each value and the sweep holds still.

Progress or something else?Copy Anchor Link

• Progress for a single upload or task the user just started: a progress toast, so it follows them around the app.
• Content that is loading: Skeleton.

API referenceCopy Anchor Link