react-simple-loading-bar

Inspired by react-redux-loading-bar but without the middleware. Handles simultaneous active requests.

Installation

npm install --save react-simple-loading-bar

Including it:

import SimpleLoadingBar from 'react-simple-loading-bar'

<SimpleLoadingBar activeRequests={this.state.activeRequests}></SimpleLoadingBar>

This is my recommended way of using the loading bar (well, not mine, I read it somewhere but I can't remember the source). The important thing is that you need to set activeRequests to a value above 0 when you want to start the loading bar. Set it to 0 when you want the loading bar to finish.

Set these in your state:

activeRequests: state.global.activeRequests

Actions:

const GlobalActions = {

    isLoading: function () {
        return {
            type: 'IS_LOADING'
        }
    },

    hasLoaded: function () {
        return {
            type: 'HAS_LOADED'
        }
    }
}

export default GlobalActions;

Reducer:

const initialState = {
    activeRequests: 0
}

const GlobalReducer = function reducer(state = initialState, action) {
    switch (action.type) {
        case 'IS_LOADING':
            return Object.assign({}, state, { activeRequests: state.activeRequests + 1 });
        case 'HAS_LOADED':
            return Object.assign({}, state, { activeRequests: state.activeRequests - 1 });
        default:
            return state;
    }
};

export default GlobalReducer;

Settings:

Set color:

<SimpleLoadingBar activeRequests={this.state.activeRequests} color={this.state.color}></SimpleLoadingBar>

Set height:

<SimpleLoadingBar activeRequests={this.state.activeRequests} height={this.state.height}></SimpleLoadingBar>