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

Code Example

import React from 'react'
import { ProgressSimple } from '../..'

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

export default ProgressSimpleDefault

Setting Values

Code Example

import React from 'react'
import { ProgressSimple } from '../..'

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

export default ProgressSimpleValue

Progress Bar Width

Code Example

import React from 'react'
import { ProgressSimple } from '../..'

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.

Code Example

import React from 'react'
import { ProgressSimple } from '../..'

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

Code Example

import React from 'react'
import { ProgressSimple } from '../..'

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

export default ProgressSimpleMuted

Align

Code Example

import React from 'react'
import { ProgressSimple } from '../..'

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

Progress Simple

See this kit in action in our sample UI

Things to Avoid

UI Samples using Progress Simple Kit

Music App