Package Exports

react-progress-3

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-progress-3) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

YouTube style progress bar for ReactJS

Demo

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

Authors and Contributors

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