Wondering what’s next for npm?Check out our public roadmap! »

    rprogress

    3.1.1 • Public • Published

    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
    

    or

    yarn add 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' />);
    

    Install

    npm i rprogress

    DownloadsWeekly Downloads

    347

    Version

    3.1.1

    License

    MIT

    Unpacked Size

    133 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar