1.0.5 • Published 7 years ago
react-prog-bar v1.0.5
react-progress-bar
Simple github style progress bar for React.
1. Installation
npm install --save react-prog-bar
2. Demo & Examples
To build the examples locally, run:
npm install
npm start
3. Usage
react-progress-bar can be used for ajax or fetch. Pseudo code below:
let isFetching = false;
const loadData = () => {
isFetching = true;
fetch(url).then(response => {
isFetching = false;
});
}
import ReactProgress from 'react-prog-bar';
<ReactCodeMirror trigger={isFetching}/>,4. Properties
| prop | type | default | notes |
|---|---|---|---|
| trigger | bool or number | false | Show the bar or set percent of the width, when trigger is number, its value should be 0-100 |
| height | string | 2px | Height of bar |
| top | bool | false | Set the bar attach to top or not |
| color | string | #77b6ff | Color of bar |
| starColor | string | white | The point at beginning of bar. |
| waitTime | number | 10 | When trigger is true, the bar will take this time to 80% width and wait until trigger switch to false |
| finishTime | number | 1 | When trigger switch from true to false, the bar will take this time to 100% width |
| stepTime | number | 0.4 | When trigger is number and the value is changed, the bar's width change from value1(%) to value2(%) during stepTime |
| disappearTime | number | 0.4 | When the bar's width is 100%, it will be invisible in disappearTime |
License
Copyright (c) 2017 ZiQiangWang MIT Licensed.