ProgressBar

Displays a progress bar that can be filled.

Examples

Label left

Label centered

Label right

<div>
  <ProgressBar
    start={0}
    value={500}
    end={1000}
    label="Label centered"
    leftLabel="Label left"
    rightLabel="Label right"
  />
</div>

<div>
  <ProgressBar
    start={0}
    value={500}
    end={1000}
    label="Label centered"
    leftLabel="Label left"
    rightLabel="Label right"
  />
</div>

Click on the progress bars to update their values

With default properties

0/100%

Centered progression with no label

0/100%

const Example = () => {
  const [value, setValue] = useState(0)
  const [isUp, setIsUp] = useState(true)

  const onChangeSingleValue = () => {
    const step = 5
    if (value >= 100) {
      setIsUp(false)
    } else if (value <= 0) {
      setIsUp(true)
    }
    setValue(prevValue => (isUp ? prevValue + step : prevValue - step))
  }

  return (
    <div>
      <Text>With default properties</Text>
      <div onClick={onChangeSingleValue}>
        <ProgressBar value={value} />
      </div>
      <br />
      <Text>Centered progression with no label</Text>
      <div onClick={onChangeSingleValue}>
        <ProgressBar
          id="secondProgress"
          value={value}
          showLabel={false}
          fillingSpeed={500}
          fillingOrientation="center"
        />
      </div>
    </div>
  )
}

render(<Example />)

const Example = () => {
  const [value, setValue] = useState(0)
  const [isUp, setIsUp] = useState(true)
  const onChangeSingleValue = () => {
    const step = 5
    if (value >= 100) {
      setIsUp(false)
    } else if (value <= 0) {
      setIsUp(true)
    }
    setValue(prevValue => (isUp ? prevValue + step : prevValue - step))
  }
  return (
    <div>
      <Text>With default properties</Text>
      <div onClick={onChangeSingleValue}>
        <ProgressBar value={value} />
      </div>
      <br />
      <Text>Centered progression with no label</Text>
      <div onClick={onChangeSingleValue}>
        <ProgressBar
          id="secondProgress"
          value={value}
          showLabel={false}
          fillingSpeed={500}
          fillingOrientation="center"
        />
      </div>
    </div>
  )
}
render(<Example />)

Theme

Props

Name	Type	Default value	Description
end	number	100	End of the progressbar.
fillingOrientation	enum	'left'	Tells how the progressbar will be filled (left, center or right).
fillingSpeed	number	100	Define the filling speed of the progressbar.
label	string	null	Define the label text.
leftLabel	string	''	Define the left label text.
rightLabel	string	''	Define the right label.
start	number	0	Beginning of the progressbar.
step	number	1	Incremental step.
value	number	0	Progressbar value.