import { ProgressBar, CircularProgress } from '@cerberus/react'The ProgressBar component is used to display a linear progress indicator. It can be used in both determinate and indeterminate states.
The CircularProgress component is used to display a circular progress indicator. It will scale to the size of its container.
The CircularProgress component supports different sizes via the size prop.
The CircularProgress component allows you to hide the value text via the hideValueText prop.
You can customize the label displayed below the value by passing a custom React node to the label prop.
You can utilize the primitive components or style props to customize the progress components.
| Component | Description |
|---|---|
| ProgressBarRoot | The container for the ProgressBar parts |
| ProgressBarBar | The percentage bar of the amount |
| 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 |
Both ProgressBar and CircularProgress components expose CSS variables for easy customization.
| Variable Name | Description |
|---|---|
--percent | The percent value for the root. |
--radius | The border radius value. |
--circumference | The circumference value for the root. |
--offset | The offset position of the element |
Both ProgressBar and CircularProgress components expose data attributes for styling based on state.
| Data Attribute | Value. |
|---|---|
[data-scope] | progress |
[data-part] | The primitive layer (e.g. 'root') |
[data-max] | The value of max |
[data-value] | The value of the progress |
[data-state] | The state of the progress (e.g. 'loading') |
[data-orientation] | The orientation of the progress (e.g. 'horizontal', 'vertical') |
| 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 |
|---|---|---|
| hideValueText | false | Hides the value text in the center of the circle. |
| 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