Circular progress

The circular progress visually represents completion status when horizontal space is tight (determinate) or as a loading spinner (indeterminate). If sufficient horizontal space is available, use the Linear progress component instead.

Install
npm install @pluralsight/ps-design-system-circularprogress
Import
import Avatar from '@pluralsight/ps-design-system-circularprogress'

Examples

Size

Circular progress comes in two standard sizes.

import CircularProgress from '@pluralsight/ps-design-system-circularprogress'
import React from 'react'

function Example() {
  return (
    <div className="example-grid--col-2">
      <CircularProgress size={CircularProgress.sizes.small} value={75} />
      <CircularProgress size={CircularProgress.sizes.medium} value={75} />
    </div>
  )
}

export default Example

Mode

Mode is determined by the presence of the value prop. When a value is given the mode is "determinate", and visual progress is set to that static value. When a value is absent the mode is "indeterminate" and becomes an infinite spinner.

import CircularProgress from '@pluralsight/ps-design-system-circularprogress'
import React from 'react'

function Example() {
  return (
    <div className="example-grid--col-2">
      <CircularProgress value={66} />
      <CircularProgress />
    </div>
  )
}

export default Example

Animation

import { colorsBackgroundDark, colorsBackgroundLight, colorsTextIcon, layout, type } from '@pluralsight/ps-design-system-core'
import CircularProgress from '@pluralsight/ps-design-system-circularprogress'
import Theme from '@pluralsight/ps-design-system-theme'
import React from 'react'

function AnimationDemo() {
  const [value, setValue] = React.useState(0)
  React.useEffect(() => {
    const timer = setInterval(() => {
      const rando = Math.floor(Math.random() * 115)
      setValue(rando > 100 ? 100 : rando)
    }, 2500)
    return () => clearInterval(timer)
  })

  return (
    <div className="root">
      <div className="value">
        Value: <span className="exampleNumber">{value}</span>
      </div>
      <Theme>
        <div className="example">
          <CircularProgress value={value} />
        </div>
      </Theme>
      <style jsx>{`
        .root {
          display: flex;
          justify-content: center;
          height: 150px;
        }
        .value,
        .example {
          display: flex;
          justify-content: center;
          align-items: center;
          flex: 1;
        }
        .value {
          background: ${colorsBackgroundLight[2]};
          border-radius: 12px 0 0 12px;
          font-size: ${type.fontSize600};
          color: ${colorsTextIcon.lowOnLight};
        }
        .example {
          background: ${colorsBackgroundDark[3]};
          border-radius: 0 12px 12px 0;
        }
        .exampleNumber {
          padding-left: ${layout.spacingSmall};
          width: 3em;
        }
      `}</style>
    </div>
  )
}

export default AnimationDemo

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

WAI-ARIA Patterns: Meter

Props

Name	Type	Description	Default
`size`	`small \| medium`	standard size for widget (from CircularProgress.sizes)	`medium`
`value`	`number`	current progress out of 100