Circular progress

Examples

Size

Circular progress comes in two standard sizes.

75% complete
75% complete
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.

66% complete
Loading...
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

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.

Value: 0
0% complete
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.fontSizeLarge};
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

Usage & Types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-circularprogress
  • Import
    import Avatar from '@pluralsight/ps-design-system-circularprogress'
Name
Type
Description
Default
size
small | medium
standard size for widget (from CircularProgress.sizes)medium
valuenumbercurrent progress out of 100