View Source

Progress

An unopinionated progress implementation, allowing for a variety of shapes and effects.

Installation#

npm i --save boundless-progress

Progress can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { Progress } from 'boundless';

Demo

Horizontal Progress Bar
Filling Progress Meter
Indeterminate Progress Bar
Show Implementation

Props#

Required Props#

There are no required props.

Optional Props#

NameImplementationDescription
*
Expects
any

any React-supported attribute

cancelComponent
Expects
string or function
Default Value
'button'

any valid HTML tag name

cancelProps
Expects
object
Default Value
{}
*
Expects
any

any React-supported attribute

component
Expects
string
Default Value
'div'

any valid HTML tag name

onCancel
Expects
function
Default Value
null

if supplied, adds a cancel element and calls this function when that element is clicked

progress
Expects
string or number
Default Value
undefined

the integer (and unit, if applicable) of the current progress state, e.g. 0.01 (opacity)

progressComponent
Expects
string
Default Value
'div'

any valid HTML tag name

progressProps
Expects
object
Default Value
{}
*
Expects
any

any React-supported attribute

tweenProperty
Expects
string
Default Value
'width'

the CSS property to tween (must accept percentages) - defaults to "width"