Progress Indicators

A visual indicator showing the completion status of a task or operation.

Base Example

<ProgressBar value={45} />

45%

<ProgressBar value={45} labelPosition="right" />

20%

<ProgressBar value={20} labelPosition="bottom" />

20%

<ProgressBar value={20} labelPosition="top-floating" />

80%

<ProgressBar value={80} labelPosition="bottom-floating" />

40%

<ProgressBarCircle size="xxs" value={40} />

<ProgressBarCircle size="xs" value={40} />

<ProgressBarCircle size="sm" value={40} />

40%

Progrès

40%

Progrès

40%

<ProgressBarCircle size="xxs" value={40} label="Progrès" />

<ProgressBarCircle size="xs" value={40} label="Progrès" />

<ProgressBarCircle size="sm" value={40} label="Progrès" />

60%

<ProgressBarHalfCircle size="xxs" value={60} />

<ProgressBarHalfCircle size="xs" value={60} />

<ProgressBarHalfCircle size="sm" value={60} />

60%

Objectif

60%

Objectif

60%

<ProgressBarHalfCircle size="xxs" value={60} label="Objectif" />

<ProgressBarHalfCircle size="xs" value={60} label="Objectif" />

<ProgressBarHalfCircle size="sm" value={60} label="Objectif" />

Props	Type	Default	Description
value	number	-	The current value of the progress indicator.
min?	number	0	The minimum value of the progress indicator.
max?	number	100	The maximum value of the progress indicator.
labelPosition?	"right" \| "bottom" \| "top-floating" \| "bottom-floating"	-	Label position for the progress bar.
getValueLabel?	function (value: number, max: number) => string	-	A function to get the accessible label text representing the current value in a human-readable format for the progress bar.
size?	'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg'	xxs	Size for circles progress indicators.
Label?	string	-	Accessible label for circles progress indicator.
className?	string	-	Additional CSS classes to apply to the progress indicator.