Progress Indicators

Progress indicators are used to show the progress of a task.

import { ProgressBar, CircularProgress } from '@cerberus/react'

Usage

The ProgressBar component is used to display a linear progress indicator. It can be used in both determinate and indeterminate states.

Rounded

Block

The CircularProgress component is used to display a circular progress indicator. It will scale to the size of its container.

25%Done

50%Done

75%Done

100%complete

The CircularProgress component supports different sizes via the size prop.

25%Done

50%Done

75%Done

100%complete

You can utilize the primitive components or the css prop to customize the progress bar.

Component	Description
ProgressBarRoot	The container for the ProgressBar parts
ProgressBarBar	The percentage bar of the amount

You can utilize the primitive components or the css prop to customize the circular progress.

Component	Description
CircularProgressRoot	The context provider for the CircularProgress parts
CircularProgressInfoGroup	The container for the text parts
CircularProgressLabel	The descriptive text below the value
CircularProgressValueText	The value of the progress, displayed in the center circle
CircularProgressCircle	The container of the progress
CircularProgressCircleTrack	The track of the progress
CircularProgressCircleRange	The range of the progress

Name	Default	Description
id		The id of the CircularProgress.
label		A description of what the progress bar is for.
size	`md`	The size of the progress bar.
usage	`rounded`	The style of the progress bar.
now		The current progress value.
indeterminate	`false`	If the progress bar is in an indeterminate state.

Name	Default	Description
label		A description of what the progress bar is for.
size	`md`	The size of the circular progress.
usage	`filled`	The fill style of the center circle used for the bg.

The CircularProgress component also accepts all the props of the CircularProgressRoot primitive props

On this page