RProgress.js

RProgress is react ajax loader progress bar with clear API.

It's helpful to create Ajax-heavy apps.
Library use API to manage progress bar.

Example: http://xnimorz.github.io/rprogress/

$3

``
npm install --save rprogress
`
or
`
yarn add rprogress
`

$3

There are several ways to use rprogress.js :

##### №1) use webpack bundle

`
import { RProgress, RProgressApi } from 'rprogress';
`

or

`
import { RProgress, RProgressApi } from 'rprogress/lib/index';
`

Then you need to add css-loader to your webpack config file.

For example:
`
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'style',
'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
)
}
`

RProgress support css-modules, but you can compile css without them:
`
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'style',
'css?importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
)
}
`

In this case rprogress will use "rpgogress", "rprogress-overlay" css classes.


##### №2) use source code

`
import { RProgress, RProgressAPI } from 'rprogress/src';
`

Then you need to add babel-loader for javascript code and css-loader with css-modules for styles to your webpack config file.

Such as:

`
module: {
loaders: [
{ test: /\.jsx?$/, loader: "babel-loader"},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'style',
'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss-loader'
)
}
]
}
`

Also you can open webpack.config.js or webpack.example.js (without css-modules) to check webpack configs.

$3

`
RProgressApi.start() - show progress. Progress position will be from 0 to 12%

RProgressApi.step() - increase progress position by 10%

RProgressApi.step(to) - set up progress position to to%

RProgressApi.complete() - set up progress position to 100% and close progress when animation is over

RProgressApi.release() - set up progress position to 0

RProgressApi.subscribe(callback) - call callback-function after any progress position changes

RProgressApi.toggleAnimation(animationEnableFlag) - turn off\on auto-progress
`

$3

Progress bar indicate working and after every 500ms animate himself. In this case progress bar position increase up to 2%
You can turn off auto-progress call `RProgressApi.toggleAnimation(false)`

$3

##### Color:

`
React.render();
`

##### Type:

RProgress supports two types:

- incremental (default) progress bar
- cycle

Turn on cycle type:
`
React.render();
`

##### Custom class:

`
import { RProgress } from 'rprogress';

import 'myStylesClass.css';

React.render();
``