Progress

An indicator that displays the status of a task or a process.

Usage

The Progress component is used to show the completion status of a task. It can be displayed as a linear bar or a circular indicator.

import { Progress } from "@elemnts-ui/react";

<Progress defaultValue={40}>
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress>;

Examples

With Label

You can add a label and value text to provide more context about the progress.

Indeterminate

When the progress value is unknown, set value to null to show an indeterminate state.

API Reference

Progress

The root container for the progress component.

Prop	Type	Default
value	`number`	-
defaultValue	`number`	`50`
onValueChange	`(details: ValueChangeDetails) => void`	-
min	`number`	`0`
max	`number`	`100`
orientation	`"horizontal" \| "vertical"`	`"horizontal"`
formatOptions	`NumberFormatOptions`	`{ style: "percent" }`
locale	`string`	`"en-US"`
translations	`IntlTranslations`	-
id	`string`	-
ids	`Partial<{ root: string; track: string; label: string; circle: string }>`	-
asChild	`boolean`	`false`

ProgressRootProvider

Advanced component for using a custom progress hook.

Prop	Type	Default
value	`UseProgressReturn`	required
asChild	`boolean`	`false`

ProgressTrack

The container for the linear progress range.

Prop	Type	Default
asChild	`boolean`	`false`

ProgressRange

The visual indicator of the linear progress value.

Prop	Type	Default
asChild	`boolean`	`false`

ProgressCircle

The SVG container for circular progress.

Prop	Type	Default
asChild	`boolean`	`false`

ProgressCircleTrack

The background track for circular progress.

Prop	Type	Default
asChild	`boolean`	`false`

ProgressCircleRange

The visual indicator of the circular progress value.

Prop	Type	Default
asChild	`boolean`	`false`

ProgressLabel

The label for the progress component.

Prop	Type	Default
asChild	`boolean`	`false`

ProgressValueText

The text representation of the current progress value.

Prop	Type	Default
asChild	`boolean`	`false`

ProgressView

Renders its children based on the current progress state.

Prop	Type	Default
state	`ProgressState`	required
asChild	`boolean`	`false`