🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple, slim, top progress bar component for ReactJS.

Loading React

Documentation

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.


You May Also Like