Circular progress

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
Click to expand

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
Click to expand

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
Click to expand