Progress

Progress Bar

A <ProgressBar/> bar provides animated visual feedback to a user on how long an action is taking to complete.

Preview

Code

<ProgressBar label='Progress' progress='75%' />

Props

Prop	Description	Required	Value
className	custom styles	optional	SCSS or Tailwind style
label	text label	optional	string
progress	percentage string	required	0% - 100%

Progress Steps

<ProgressSteps/> are used to indicate the current point in a multiple-stage process, like filling in a long form.

Preview

Code

<ProgressSteps items={[
  { name: 'Basket', url: '/basket', completed: true },
  { name: 'Checkout', url: '/checkout', completed: true },
  { name: 'Payment', url: '/payment', completed: false },
]}/>

Props

Prop	Description	Required	Value
items	list of step objects	required	array