React Progress Bar Plus

Progress bar component for ReactJS.

Installation

NPM

npm install --save react-progress-bar-plus

Bower

bower install --save react-progress-bar-plus

Usage

JS

const ProgressBar = require('react-progress-bar-plus');

<ProgressBar percent={10}/>

CSS

Webpack:

require('react-progress-bar-plus/lib/progress-bar.css');

Without Webpack:

<link rel="stylesheet" type="text/css" href="path/to/react-progress-bar-plus/lib/progress-bar.css">

UMD

<link rel="stylesheet" type="text/css" href="path/to/react-progress-bar-plus/dist/react-progress-bar-plus.css">
<script src="path/to/react-progress-bar-plus/dist/react-progress-bar-plus.js"></script>

const ProgressBar = window.ReactProgressBarPlus;

Example here

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | percent | number | -1 | Progress percent | | onTop | bool | false | Progress bar will ontop & height 100% | | autoIncrement | bool | false | if true percent will auto increment Math.random() + 1 - Math.random()% in intervalTime ms. | | intervalTime | number | 200 | Interval time for auto increment. | | spinner | oneOf([false, 'left', 'right']) | left | Spinner position. Pass false to hide spinner icon. | | className | string | | Custom class |

Example

View demo or example folder.

License

MIT Licensed. Copyright (c) Minh Tran 2016.