Linear progress

import React from 'react'
import LinearProgress from '@pluralsight/ps-design-system-linearprogress'

const Comp = () => (
  <div className="example-flex-column">
    <LinearProgress value={0} />
    <LinearProgress value={33} />
    <LinearProgress value={66} />
    <LinearProgress value={100} />
  </div>
)

export default Comp

Click to expand

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

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

const Comp = () => {
  const value = useRandom()
  return (
    <div className="root">
      <div className="value">
        Value: <span className="exampleNumber">{value}</span>
      </div>
      <Theme>
        <div className="example">
          <LinearProgress 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;
          padding: 0 ${layout.spacingMedium};
        }
        .exampleNumber {
          padding-left: ${layout.spacingSmall};
          width: 3em;
        }
      `}</style>
    </div>
  )
}

export default Comp

Click to expand