Non Productive Monday

    react-progress-3

    3.0.1 • Public • Published

    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

    Examples

    Authors and Contributors

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

    Install

    npm i react-progress-3

    DownloadsWeekly Downloads

    7

    Version

    3.0.1

    License

    ISC

    Last publish

    Collaborators

    • kolodny