Progress

Displays a progress bar indicating task completion.

Installation

npm i @melio-ui/progress

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

import { 
  ProgressRoot,
  ProgressIndicator,
} from '@melio-ui/progress';

ProgressRoot: All parts of the progress are included.
ProgressIndicator: Render the progress indicator. You can style it yourself.

'use client';

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

<Progress.Root value={30}>
  <Progress.Indicator />
</Progress.Root>;

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

All parts of the 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

Render the progress indicator. You can style it yourself.

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

<ProgressRoot indeterminate>
  <ProgressIndicator />
</ProgressRoot>

<ProgressRoot value={30}>
  <ProgressIndicator style={{ backgroundColor: '#ff4d4f' }} />
</ProgressRoot>

<ProgressRoot value={100} max={200}>
  <ProgressIndicator />
</ProgressRoot>