Progress

How far a task has got, with its label and value over the track, turning to the live accent when done and pulsing when it can't say.

01Preview

Uploading report.pdf

Indexing the workspace

npx shadcn@latest add https://aiellie.app/r/progress.json

Groups all parts of the progress bar and provides the task completion status to screen readers. Renders a <div> element.

Prop	Type	Default	Description
value\*	number \| null	-	The current value. The component is indeterminate when value is `null`.
aria-valuetext	string	-	A string value that provides a user-friendly name for `aria-valuenow`, the current value of the progress bar.
getAriaValueText	((formattedValue: string, value: number \| null) => string)	-	Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.
locale	Intl.LocalesArgument	-	The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale.
min	number	0	The minimum value.
max	number	100	The maximum value.
format	Intl.NumberFormatOptions	-	Options to format the value.
className	string \| ((state: Progress.Root.State) => string \| undefined)	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	React.CSSProperties \| ((state: Progress.Root.State) => React.CSSProperties \| undefined)	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	ReactElement \| ((props: HTMLProps, state: Progress.Root.State) => ReactElement)	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Attribute	Type	Description
data-complete	-	Present when the progress has completed.
data-indeterminate	-	Present when the progress is in indeterminate state.
data-progressing	-	Present while the progress is progressing.