ProgressCircle

A circular indicator that displays the status of a task or a process.

Usage

The ProgressCircle component is used to show the completion status of a task using a circular indicator. It is built using the Progress component parts.

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

<Progress defaultValue={33}>
  <Progress.Circle>
    <Progress.CircleTrack />
    <Progress.CircleRange />
  </Progress.Circle>
</Progress>;

Examples

Indeterminate

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

API Reference

Progress

The root container for the circular 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`

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`