CircularProgress

Circular progression is used to indicate the progress of both deterministic and indeterminate processes.

Preview
Code

30%

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/circular-progress

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  CircularProgressRoot,
  CircularProgressIndicator,
  CircularProgressLabel,
} from '@melio-ui/circular-progress';

CircularProgressRoot: All parts of the circular-progress are included.
CircularProgressIndicator: Render the progress indicator. You can style it yourself.
CircularProgressLabel: Displays progress as text.

Another way to import

'use client';

import { CircularProgress } from '@melio-ui/circular-progress';

<CircularProgress.Root>
  <CircularProgress.Indicator />
  <CircularProgress.Label>30%</CircularProgress.Label>
</CircularProgress.Root>;

'use client' must be used when rendering on the server side.

API Reference

CircularProgressRoot

All parts of the circular-progress are included.

Prop	Type	Default	Description
value	`number`	-	It is the progress value.
max	`number`	100	This is the maximum progress value.
indeterminate	`boolean`	-	This means that progress is uncertain.

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

CircularProgressIndicator

Render the progress indicator. You can style it yourself.

Prop	Type	Default	Description
strokeWidth	`number`	-	strokeWidth property of circle element.
bgStyle	`React.CSSProperties`	-	Style of the background circle element.
barStyle	`React.CSSProperties`	-	Style of circle element to indicate progress.

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

CircularProgressLabel

Displays progress as text.

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

Examples

Indeterminate

<CircularProgressRoot indeterminate>
  <CircularProgressIndicator />
</CircularProgressRoot>

Custom Indicator

<CircularProgressRoot value={60}>
  <CircularProgressIndicator
    strokeWidth={15}
    bgStyle={{ stroke: '#d9d9d9' }}
    barStyle={{ stroke: '#ff4d4f' }}
  />
</CircularProgressRoot>

Max

<CircularProgressRoot value={80} max={200}>
  <CircularProgressIndicator />
  <CircularProgressLabel />
</CircularProgressRoot>

Checkbox

Dialog