Progress Indicators

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

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

Usage

Progress Bar

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

Rounded

Block

import { ProgressBar, Tag } from '@cerberus/react'
import { HStack, VStack } from 'styled-system/jsx'

export function OverviewPreview() {
  return (
    <HStack
      gap="10"
      w="3/4"
    >
      <VStack gap="md" w="full">
        <ProgressBar
          id="rounded-example"
          label="rounded progress example"
          size="sm"
          now={75}
        />
        <Tag shape="pill">Rounded</Tag>
      </VStack>
      <VStack gap="md" w="full">
        <ProgressBar
          id="block-example"
          label="block progress example"
          size="sm"
          usage="block"
          now={75}
        />
        <Tag shape="pill">Block</Tag>
      </VStack>
    </HStack>
  )
}

Circular Progress

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

Not Started

25%Done

50%Done

75%Done

100%complete

'use client'

import { CircularProgress, Text } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

function NotStartedText() {
  return (
    <Text textAlign="center" textStyle="heading-2xs" px="md">
      Not Started
    </Text>
  )
}

function CircularPreview() {
  return (
    <HStack>
      <CircularProgress
        id="0"
        defaultValue={0}
        label={<NotStartedText />}
        hideValueText
      />
      <CircularProgress id="25" defaultValue={25} />
      <CircularProgress id="50" defaultValue={50} />
      <CircularProgress id="75" defaultValue={75} />
      <CircularProgress id="complete" label="complete" defaultValue={100} />
    </HStack>
  )
}

Sizes

The CircularProgress component supports different sizes via the size prop.

25%Done

50%Done

75%Done

100%complete

function SizesPreview() {
  return (
    <HStack w="1/2">
      <CircularProgress id="25" defaultValue={25} size="xs" />
      <CircularProgress id="50" defaultValue={50} size="sm" />
      <CircularProgress id="75" defaultValue={75} size="md" />
      <CircularProgress
        id="complete"
        label="complete"
        defaultValue={100}
        size="lg"
      />
    </HStack>
  )
}

Hide Value Text

The CircularProgress component allows you to hide the value text via the hideValueText prop.

Not Started

function HideValueTextPreview() {
  return (
    <HStack justify="center" w="1/2">
      <CircularProgress
        defaultValue={0}
        label={<NotStartedText />}
        hideValueText
      />
    </HStack>
  )
}

Custom Label

You can customize the label displayed below the value by passing a custom React node to the label prop.

60%

function CustomLabelPreview() {
  return (
    <HStack justify="center" w="1/2">
      <CircularProgress
        defaultValue={60}
        label={
          <Text color="yellow" textStyle="heading-sm">
            Loading
          </Text>
        }
      />
    </HStack>
  )
}

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

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

Data Attributes

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')

API

ProgressBar

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

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

Edit this page on Github