Progress Indicators

Progress indicators show the status of a process in real time.

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

Usage

Preview Playground

import { ProgressBar, type ProgressBarProps } from '@cerberus/react' export function MyProgressBar(props: ProgressBarProps) { return ( <ProgressBar id="UUID" indeterminate={false} label="A description of what the progress bar represents" now={75} size="sm" usage="rounded" /> ) }

Circular Progress

Course completion30% Done30%Done

Preview Playground

import { CircularProgress, type CircularProgressProps } from '@cerberus/react' export function MyCircularProgress(props: CircularProgressProps) { return ( <CircularProgress bgStyle="filled" label="Description of what the progress bar represents" id="UUID" syntax="Done" now={30} title="Course completion" /> ) }

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
NameDefaultDescription
idThe id of the CircularProgress.
labelA description of what the progress bar is for.
sizemdThe size of the progress bar.
usageroundedThe style of the progress bar.
nowThe current progress value.
indeterminatefalseIf 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
NameDefaultDescription
idThe id of the CircularProgress.
label``A description of what the progress bar is for.
nowThe current progress value.
titleThe title of the CircularProgress for a11y.
syntaxDoneWhat is shown below the now value.
bgStylefilledThe fill style of the center circle used for the bg.