React ajax loader progress bar with clear API
JavaScript Other
Permalink
Failed to load latest commit information.
example Add color and type props to rprogress May 6, 2016
lib Add color and type props to rprogress May 6, 2016
src
tests minor documentation updates Feb 21, 2016
.babelrc init project Feb 15, 2016
.gitignore remove React and other external libraries from build. Changes is buil… Mar 9, 2016
.npmignore Add color and type props to rprogress May 6, 2016
README.md Add color and type props to rprogress May 6, 2016
package.json
webpack.example.css-modules.config.js remove React and other external libraries from build. Changes is buil… Mar 9, 2016
webpack.example.js Add animation toggle, tests, and readme Feb 21, 2016

README.md

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/

Install:

npm install --save rprogress

Usage

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.

API

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

Auto-progress

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)

Customization

Color:
React.render(<RProgress color='#21B919' />);
Type:

RProgress supports two types:

  • incremental (default) progress bar
  • cycle

Turn on cycle type:

React.render(<RProgress type='cycle' />);
Custom class:
import { RProgress } from 'rprogress';

import 'myStylesClass.css';

React.render(<RProgress className='myStylesClass' />);