Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Features

Provides context for assistive technology to read the progress of a task.

Install the component from your command line.

npm install @tealess/progress

Import all parts and piece them together.

import * as Progress from "@tealess/progress";

export default () => (
  <Progress.Root>
    <Progress.Indicator />
  </Progress.Root>
);

Contains all of the progress parts.

Data attribute	Values
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	The current value
`[data-max]`	The max value

Used to show the progress visually. It also makes progress accessible to assistive technologies.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	The current value
`[data-max]`	The max value

PreviousPopover