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

const GlobalActions = { isLoading : function ( ) { return { type : ' IS_LOADING ' } } , hasLoaded : function ( ) { return { type : ' HAS_LOADED ' } } } export default GlobalActions ;

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 ;

Set color:

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

Set height: