Progress Simple

Displays the current progress of an operation flow. User understanding increases when paired with labels or numbers.

See this kit in action in our sample UI

Default

import React from 'react'
import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleDefault = () => {
  return (
    <div>
      <ProgressSimple percent={45} />
    </div>
  )
}

export default ProgressSimpleDefault

Setting Values

import React from 'react'
import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleValue = () => {
  return (
    <div>
      <ProgressSimple
          align="left"
          percent={68}
      />
      <br />
      <ProgressSimple
          max="10"
          value="2"
      />
    </div>
  )
}

export default ProgressSimpleValue

Within a Flex

When rendering a Progress Simple through within a Flex container, you must pass flex="1" to the kit itself so that it fills the available space

import React from 'react'
import { Flex, ProgressSimple } from 'playbook-ui'

const ProgressSimpleFlex = () => {
  return (
    <Flex>
      <ProgressSimple
          align="left"
          flex="1"
          percent={68}
      />
    </Flex>
  )
}

export default ProgressSimpleFlex

Progress Bar Width

import React from 'react'
import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleValue = () => {
  return (
    <div>
      <ProgressSimple
          percent={40}
          width="100px"
      />
    </div>
  )
}

export default ProgressSimpleValue

Variants

Progress Simple can pass colors - primary, green, red, and yellow. Variants names are default, positive, negative, and warning, respectively.

import React from 'react'
import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleVariants = () => {
  return (
    <div>
      <ProgressSimple percent={64.5} />

      <br />

      <ProgressSimple
          percent={90}
          variant="positive"
      />

      <br />

      <ProgressSimple
          percent={10}
          variant="negative"
      />

      <br />

      <ProgressSimple
          percent={40}
          variant="warning"
      />
    </div>
  )
}

export default ProgressSimpleVariants

Muted

import React from 'react'
import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleMuted = () => {
  return (
    <div>
      <ProgressSimple
          muted
          percent={68}
      />
    </div>
  )
}

export default ProgressSimpleMuted

Align

import React from 'react'
import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleAlign = () => {
  return (
    <div>
      <ProgressSimple
          align="left"
          percent={45}
          width="100px"
      />
      <br />
      <ProgressSimple
          align="center"
          percent={45}
          width="100px"
      />
      <br />
      <ProgressSimple
          align="right"
          percent={45}
          width="100px"
      />
    </div>
  )
}

export default ProgressSimpleAlign

Things to Avoid

Do not use as turbolinks bar.

UI Samples using Progress Simple Kit

Get the full picture. See how this kit is used in our samples.

Music App

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat