Linear progress

The linear progress visually represents completion status. If sufficient horizontal space is not available, use the Circular progress component instead.

  • Install
    npm install @pluralsight/ps-design-system-linearprogress
  • Import
    import LinearProgress from '@pluralsight/ps-design-system-linearprogress'

Examples

Value

To set the progress, use the value prop with a number between 0 and 100.

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

Animation

Initial render is not animated, but the progress will tween as the value prop is updated.

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

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests
Manual audit

WAI-ARIA Patterns: Meter

Props

Name
Type
Description
Default
valuenumbercurrent progress out of 100