npm i boundless-progress --save
Then use it like:
/** @jsx createElement */
import { each } from 'lodash';
import { createElement, PureComponent } from 'react';
import Button from 'boundless-button';
import Progress from 'boundless-progress';
export default class ProgressDemo extends PureComponent {
state = {
barProgress: 0,
meterProgress: 0,
}
componentDidMount() {
each(this.refs, (value, key) => this.updateProgress(key));
}
componentWillUnmount() {
window.clearTimeout(this.barTimerHandle);
window.clearTimeout(this.meterTimerHandle);
}
updateProgress(type) {
if (this.state[`${type}Progress`] < 100) {
this[`${type}TimerHandle`] = window.setTimeout(() => {
this.setState({ [`${type}Progress`]: this.state[`${type}Progress`] + 1 }, () => {
this.updateProgress(type);
});
}, 35);
}
}
resetProgress(type) {
window.clearTimeout(this[`${type}TimerHandle`]);
this.setState({ [`${type}Progress`]: 0 }, () => { this.updateProgress(type); });
}
render() {
return (
<div className='progress-demo spread align-end'>
<figure>
<h5>Horizontal Progress Bar</h5>
<Progress
ref='bar'
aria-label={`${this.state.barProgress}% complete`}
progress={`${this.state.barProgress}%`} />
<Button
onPressed={this.resetProgress.bind(this, 'bar')}
style={{ marginTop: '1rem' }}>
Reset
</Button>
</figure>
<figure>
<h5>Filling Progress Meter</h5>
<Progress
ref='meter'
id='progress-meter'
aria-label={`${this.state.meterProgress}% complete`}
progress={`${this.state.meterProgress}%`}
tweenProperty='height' />
<Button
onPressed={this.resetProgress.bind(this, 'meter')}
style={{ marginTop: '1rem' }}>
Reset
</Button>
</figure>
<figure>
<h5>Indeterminate Progress Bar</h5>
<Progress
ref='indeterminate'
aria-label={'Processing...'} />
</figure>
</div>
);
}
}
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';
Note: only top-level props are in the README, for the full list check out the website.
There are no required props.
-
*
· any React-supported attributeExpects Default Value any
n/a
-
cancelComponent
· any valid HTML tag nameExpects Default Value string or function
'button'
-
cancelProps
Expects Default Value object
{}
-
component
· any valid HTML tag nameExpects Default Value string
'div'
-
onCancel
· if supplied, adds a cancel element and calls this function when that element is clickedExpects Default Value function
null
-
progress
· the integer (and unit, if applicable) of the current progress state, e.g. 0.01 (opacity)Expects Default Value string or number
undefined
-
progressComponent
· any valid HTML tag nameExpects Default Value string
'div'
-
progressProps
Expects Default Value object
{}
-
tweenProperty
· the CSS property to tween (must accept percentages) - defaults to "width"Expects Default Value string
'width'
You can see what variables are available to override in variables.styl.
// Redefine any variables as desired, e.g:
color-accent = royalblue
// Bring in the component styles; they will be autoconfigured based on the above
@require "node_modules/boundless-progress/style"
If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css
, based on Boundless's default variables.