Progress

Progress Bar
Create a progress bar to provide visual feedback to a user on how long an action is taking. Progress bars are automatically animated. 
1
<ProgressBar label='Progress' progress='75%' />
Copied!
Props
prop
description
value
label
label text
string
progress
percentage value
0% - 100%
Progress Steps
Steps can be used to indicate the current point in a multiple-stage process, such as filling in a long form.
1
<ProgressSteps items={[
2
  { name: 'Basket', url: '/basket', completed: true },
3
  { name: 'Checkout', url: '/checkout', completed: true },
4
  { name: 'Payment', url: '/payment', completed: false },
5
]}/>
Copied!
Props
prop
description
value
items
list of step objects containing name, url and completed
object array
​

Pricing

Last modified 2yr ago

Copy link

Contents

Progress Bar

Progress Steps