Import
import { ProgressBar, CircularProgress } from '@cerberus/react'Progress Bar
The ProgressBar component is used to display a linear progress indicator. It can be used in both determinate and indeterminate states.
Loading example...
Sizes
The ProgressBar component supports different sizes via the size prop.
Loading example...
Usage
To show different styles of the ProgressBar, use the usage prop.
Loading example...
States
The ProgressBar component supports both determinate and indeterminate states.
Loading example...
Circular Progress
The CircularProgress component is used to display a circular progress indicator. It will scale to the size of its container.
Loading example...
Sizes
The CircularProgress component supports different sizes via the size prop.
Loading example...
Hide Value Text
The CircularProgress component allows you to hide the value text via the hideValueText prop.
Loading example...
Custom Label
You can customize the label displayed below the value by passing a custom React node to the label prop.
Loading example...
Guides
CSS Variables
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 |
Primitives
You can utilize the primitive components or style props to customize the progress components.
Progress Bar
| Component | Description |
|---|---|
ProgressBarRoot | The container for the ProgressBar parts |
ProgressBarBar | The percentage bar of the amount |
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 |
API
ProgressBar
| Name | Default | Description |
|---|---|---|
| id | The id of the CircularProgress. |
| now | | The current progress value. |
| indeterminate | false | If the progress bar is in an indeterminate state. |
CircularProgress
| 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. |
Root
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
asChild | boolean | false | undefined | Use the provided child element as the default rendered element, combining their props and behavior. |
defaultValue | number | false | 50 | The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar. |
formatOptions | NumberFormatOptions | false | { style: "percent" } | The options to use for formatting the value. |
id | string | false | undefined | The unique identifier of the machine. |
ids | Partial<{ root: string; track: string; label: string; circle: string }> | false | undefined | The ids of the elements in the progress bar. Useful for composition. |
locale | string | false | "en-US" | The locale to use for formatting the value. |
max | number | false | 100 | The maximum allowed value of the progress bar. |
min | number | false | 0 | The minimum allowed value of the progress bar. |
onValueChange | (details: ValueChangeDetails) => void | false | undefined | Callback fired when the value changes. |
orientation | 'horizontal' | 'vertical' | false | "horizontal" | The orientation of the element. |
translations | IntlTranslations | false | undefined | The localized messages to use. |
value | number | false | undefined | The controlled value of the progress bar. |
label | string | false | undefined | The label of the progress bar. |
size | ProgressSize | false | undefined | The size of the progress bar. |
usage | 'rounded' | 'circular' | 'filled' | false | undefined | The usage of the progress bar. |
Data Attributes
| Attribute | Description / Value |
|---|---|
data-scope | progress |
data-part | root |
data-max | |
data-value | The value of the item |
data-state | |
data-orientation | The orientation of the progress |
Circle
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
asChild | boolean | false | undefined | Use the provided child element as the default rendered element, combining their props and behavior. |
CircleRange
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
asChild | boolean | false | undefined | Use the provided child element as the default rendered element, combining their props and behavior. |
Data Attributes
| Attribute | Description / Value |
|---|---|
data-scope | progress |
data-part | circle-range |
data-state |
CircleTrack
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
asChild | boolean | false | undefined | Use the provided child element as the default rendered element, combining their props and behavior. |
Data Attributes
| Attribute | Description / Value |
|---|---|
data-scope | progress |
data-part | circle-track |
data-orientation | The orientation of the circletrack |
Label
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
asChild | boolean | false | undefined | Use the provided child element as the default rendered element, combining their props and behavior. |
Data Attributes
| Attribute | Description / Value |
|---|---|
data-scope | progress |
data-part | label |
data-orientation | The orientation of the label |
Range
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
asChild | boolean | false | undefined | Use the provided child element as the default rendered element, combining their props and behavior. |
Data Attributes
| Attribute | Description / Value |
|---|---|
data-scope | progress |
data-part | range |
data-orientation | The orientation of the range |
data-state |
RootProvider
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
value | UseProgressReturn | true | undefined | undefined |
asChild | boolean | false | undefined | Use the provided child element as the default rendered element, combining their props and behavior. |
Track
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
asChild | boolean | false | undefined | Use the provided child element as the default rendered element, combining their props and behavior. |
ValueText
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
asChild | boolean | false | undefined | Use the provided child element as the default rendered element, combining their props and behavior. |
View
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
state | ProgressState | true | undefined | undefined |
asChild | boolean | false | undefined | Use the provided child element as the default rendered element, combining their props and behavior. |
Data Attributes
| Attribute | Description / Value |
|---|---|
data-scope | progress |
data-part | view |
data-state |
Accessibility
Complies with the the progressbar role requirements..