Skip to content
Progress bar component for ReactJS.
Branch: master
Clone or download
Latest commit f23ca1b Jun 15, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
lib Verion 1.3.0 Jun 14, 2017
src Verion 1.3.0 Jun 14, 2017
tasks
.babelrc Verion 1.3.0 Jun 14, 2017
.bowerrc
.editorconfig
.eslintignore
.eslintrc Verion 1.3.0 Jun 14, 2017
.gitignore
.npmignore
README.md
bower.json
gulpfile.babel.js
package-lock.json
package.json
postcss.config.js
screen-shot.png
webpack.config.js

README.md

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 can’t perform that action at this time.