Progress Indicators
Progress indicators show the status of a process in real time.
- Two styles: block and rounded
- Use the same configuration for all instances of a process (like loading)
- Never use them as decoration
- They capture attention through motion
Examples
Rounded
Block
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app's state and indicate available actions, such as whether users can navigate away from the current screen.
Display overall progress of a group rather than the progress of each item in the group.
Rounded
Block
On this page
import { ProgressBar, CircularProgress } from '@cerberus/react'Usage
Circular Progress
Customization
To customize the ProgressBar we recommend extending the slot recipe provided by the @cerberus-design/panda-preset package.
API
ProgressBar
export interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> { id: string label: string size?: 'sm' | 'md' usage?: 'block' | 'rounded' now: number}type IndeterminateProgressBarProps = Omit<ProgressBarProps, 'now'> & { indeterminate: true}type ProgressBarProps = ProgressBarBaseProps & IndeterminateProgressBarProps
define function ProgressBar(props: ProgressBarProps): ReactNode| 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. |
CircularProgress
export interface CircularProgressProps extends SVGProps<SVGSVGElement> { id: string label: string now: number title: string syntax?: string bgStyle?: 'filled' | 'transparent'}
define function CircularProgress(props: CircularProgressProps): ReactNode| Name | Default | Description |
|---|---|---|
| id | The id of the CircularProgress. | |
| label | `` | A description of what the progress bar is for. |
| now | The current progress value. | |
| title | The title of the CircularProgress for a11y. | |
| syntax | Done | What is shown below the now value. |
| bgStyle | filled | The fill style of the center circle used for the bg. |
On this page
Use Cases
- Users should be able to:
- Navigate to the loading indicator with assistive technology
- Understand what progress the indicator is communicating
Interaction & Style
The active indicator, which displays progress, provides visual contrast of at least 3:1 against most background colors.
On this page