Skip to content
Pando Docs

Circular Progress Overview

View source View Figma

Description

Pando’s <CircularProgress /> is a visual component that is used to display the progress status for a task that takes a long time or consists of several steps within a page.

Circular Progress anatomy

  1. Container
  2. Base Circle
  3. Progress Circle
  4. Label

Import

import { CircularProgress } from '@pluralsight/react'

Variations

Props

Default

{
  ariaLabel: null,
  cycle:'determinate',
  displayValue: false,
  size: 'md',
  valuenow: 0,
  valuemin: 0,
  valuemax: 100,
}

All Options

{
  ariaLabel: string,
  cycle: 'determinate' | 'indeterminate',
  displayValue: boolean,
  size: 'md' | 'sm',
  valuenow: number,
  valuemin: number,
  valuemax: number,
  ...nativeDivProps
}