ProgressBar

50%

Size

Value

ShowValue

Color

import React from "react"
import { ProgressBar } from "@creation-ui/react"

export const Example = () => (
  <ProgressBar size={"md"} value={50} showValue color={"primary"} />
)

Formatting value

Value can be custom formatted with your own function that takes value and returns ReactNode. showValue needs to be set to true for this to work.

<ProgressBar value={65} formatDisplayValue={value => `Preparing for lunch: ${value}%`} showValue />

Preparing for lunch: 65%

Animated

Component API

ProgressBar component props.

Prop	Default	Description
`size`	`md`	`sm \| md \| lg` Size of element
`value`	—	`number` The value of the progress bar
`showValue`	—	`boolean` Function to format the value of the progress bar.
`children`	—	`React.ReactNode` This is the content that ProgressBar wraps around
`className`	—	`string` Class names override
`formatDisplayValue`	—	`(value: number) => string` Function to format the value of the progress bar.

Loading Overlay Clear Button