# Progress ## Installation ```bash npm i boundless-progress --save ``` Then use it like: ```jsx /** @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 (
Horizontal Progress Bar
Filling Progress Meter
Indeterminate Progress Bar
); } } ``` Progress can also just be directly used from the main [Boundless library](https://www.npmjs.com/package/boundless). This is recommended when you're getting started to avoid maintaining the package versions of several components: ```bash npm i boundless --save ``` the ES6 `import` statement then becomes like: ```js import { Progress } from 'boundless'; ``` ## Props > Note: only top-level props are in the README, for the full list check out the [website](https://boundless.js.org/Progress). ### Required Props There are no required props. ### Optional Props - __`*`__ · any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes) Expects | Default Value --- | --- `any` | `n/a` - __`cancelComponent`__ · any valid HTML tag name Expects | Default Value --- | --- `string or function` | `'button'` - __`cancelProps`__ Expects | Default Value --- | --- `object` | `{}` - __`component`__ · any valid HTML tag name Expects | Default Value --- | --- `string` | `'div'` - __`onCancel`__ · if supplied, adds a cancel element and calls this function when that element is clicked Expects | 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 name Expects | 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'` ## Reference Styles ### Stylus You can see what variables are available to override in [variables.styl](https://github.com/enigma-io/boundless/blob/master/variables.styl). ```stylus // 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" ``` ### CSS If desired, a precompiled plain CSS stylesheet is available for customization at `/build/style.css`, based on Boundless's [default variables](https://github.com/enigma-io/boundless/blob/master/variables.styl).