YouTube style progress bar for ReactJS

Installation

NPM

npm install react-progress-3

JSPM

jspm install npm:react-progress-3

Usage

Include react-progress-3/main.css to your project. With SystemJS CSS plugin you simply need to write this line:

import "react-progress-3/main.css!"

Include react-progress-3 and put it somewhere in the top-component, for example:

import React from "react";
import Progress from "react-progress-3";

var Layout = React.createClass({
    render: function() {
        return (
            <div className="layout">
                <Progress.Component/>
                {/* other components go here*/}
            </div>
        );
    }
});

Now, whenever you need to show an indicator, just call Progress#show, for example:

loadFeed: function() {
    Progress.show();
    // do your ajax thing.
},

onLoadFeedCallback: function() {
    Progress.hide();
    // render feed.
}

Please note, that show and hide calls are stacked, so after n-consecutive show calls, you need to do n hide calls to hide an indicator.

Styling

.loader-60devs .loader-60devs-progress {
    background: #ff6f00;
}

Examples

Examples

Authors and Contributors

Orignally Created in 2015 by Ruslan Prytula (@milworm). - forked by Moshe Kolodny