Progress Bar

Progress bars. Free, MIT · Basics › Loading

ARIA naming props (aria-label, aria-labelledby, aria-describedby) go to the progressbar element; the rest to the root.

Installation

npx valyro-cli@latest add progress-bar

npx shadcn@latest add https://valyro.xyz/r/progress-bar.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { ProgressBar } from 'valyro-ui';

Prop	Type	Default
`value`	`number`		Omit (or pass a non-finite number) for an indeterminate bar.
`max`	`number`	`100`	Value of a full bar; `value` is clamped to 0…max. A non-positive or non-finite max falls back to 100.
`color`	`'accent' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'accent'`	Fill color: the theme accent, a status color, or the foreground (`neutral`).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Track thickness.
`label`	`ReactNode`		Visible caption above the bar; also names the progressbar unless `aria-label` is given.
`showValue`	`boolean`	`false`	Show the percentage next to the label.
`locale`	`string`		Locale for the percentage (default: the ThemeProvider's, then the browser's).
`formatValue`	`(value: number, max: number) => string`		Custom value text (shown and announced), e.g. "3 of 8 files".
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: the fill springs to each new value (a transform, not a width change, and without overshoot) and the shown number counts along with it. `default`: the theme's width transition.