Inspired by react-redux-loading-bar but without the middleware. Handles simultaneous active requests.
npm install --save react-simple-loading-barimport 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.
activeRequests: state.global.activeRequestsconst 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;<SimpleLoadingBar activeRequests={this.state.activeRequests} color={this.state.color}></SimpleLoadingBar>
<SimpleLoadingBar activeRequests={this.state.activeRequests} height={this.state.height}></SimpleLoadingBar>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent