A React component that provides Loading Bar (aka Progress Bar) for long running tasks. Works out of the box with redux-promise-middleware
and can be easily tweaked for other usage.
Consists of:
- React component — displays loading bar and simulates progress
- Redux reducer — manages loading bar's part of the store
- Redux middleware — dispatches
SHOW
/HIDE
for actions with promises
See Demo or its source code.
npm install --save react-redux-loading-bar
Mount the LoadingBar
component anywhere in your application:
import LoadingBar from 'react-redux-loading-bar'
export default class Header extends React.Component {
render() {
return (
<header>
<LoadingBar />
</header>
)
}
}
Good news is that it doesn't include any positioning, so you can attach it to the top of any block or the whole page.
Install the reducer to the store:
import { combineReducers } from 'redux'
import { loadingBarReducer } from 'react-redux-loading-bar'
const reducer = combineReducers({
// app reducers
loadingBar: loadingBarReducer,
})
(Optional) Apply middleware to automatically show and hide loading bar on actions with promises:
import { createStore, applyMiddleware } from 'redux'
import { loadingBarMiddleware } from 'react-redux-loading-bar'
import rootReducer from './reducers'
const store = createStore(
rootReducer,
// promise middleware
applyMiddleware(loadingBarMiddleware())
)
You can configure promise type suffixes that are used in your project:
import { createStore, applyMiddleware } from 'redux'
import { loadingBarMiddleware } from 'react-redux-loading-bar'
import rootReducer from './reducers'
const store = createStore(
rootReducer,
applyMiddleware(
loadingBarMiddleware({
promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAILURE'],
})
)
)
If you're not using redux-promise-middleware
or any other promise middleware, you can skip installing the loadingBarMiddleware()
and dispatch SHOW
/HIDE
actions manually. The other option is to write your own middleware that will be similar to the bundled one.
You can dispatch SHOW
/HIDE
actions wherever you want by importing the corresponding action creators:
import { showLoading, hideLoading } from 'react-redux-loading-bar'
dispatch(showLoading())
// do long running stuff
dispatch(hideLoading())
You need to dispatch HIDE
as many times as SHOW
was dispatched to make the bar disappear. In other words, the loading bar is shown until all long running tasks complete.
Install the loadingBarMiddleware()
and mount Loading Bar in your application.
You can import and dispatch showLoading
and hideLoading
from your sagas.
import { showLoading, hideLoading } from 'react-redux-loading-bar'
export function* fetchData() {
try {
yield put(showLoading())
const payload = yield call(API, params)
// payload processing
} finally {
yield put(hideLoading())
}
}
If you happen to use jQuery for Ajax requests, you can dispatch SHOW
/HIDE
actions on ajaxStart
/ajaxStop
global events:
$(document).on('ajaxStart', this.props.actions.showLoading)
$(document).on('ajaxStop', this.props.actions.hideLoading)
See a demo or checkout the code.
You can apply custom styling right on the LoadingBar
component. For example you can change the color and height of the loading bar:
<LoadingBar style={{ backgroundColor: 'blue', height: '5px' }} />
Alternatively, you can specify your own CSS class.
Please note that will disable default styling (which is color: red; height: 3px; position: absolute;
).
<LoadingBar className="loading" />
Don't forget to set height
, color
and position
for the loading
class in your CSS files.
You can change updateTime (by default 200ms), maxProgress (by default 90%) and progressIncrease (by default 5%):
<LoadingBar updateTime={100} maxProgress={95} progressIncrease={10} />
npm test
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.
To see what has changed in recent versions of Loading Bar, see the CHANGELOG.
Licensed MIT. Copyright 2016-current Anton Mironov.