React Redux Loading Bar
react-redux-loading-bar and unless you're taking one of my classes, you should use that instead. I forked it to avoid breaking changes (it really sucks to have to redo a whole course cause the loading library decided to change...)
This is a fork ofA React component that provides Loading Bar (aka Progress Bar) for long running tasks.
Consists of:
- React component — displays loading bar and simulates progress
- Redux reducer — manages loading bar's part of the store
- (optional) Redux middleware — automatically shows and hides Loading Bar for actions with promises
Examples
See Demo or its source code.
Installation
npm install --save react-redux-loading-bar
Usage
Mount the LoadingBar
component anywhere in your application:
import LoadingBar from 'react-redux-loading-bar' Component { return <header> <LoadingBar /> </header> }
Good news is that it doesn't include any positioning. You can attach it to the top of any block or the whole page.
You can even include multiple loading bars on the same page, that will render independently. They need to be provided with a scope so that you can adjust them independently.
import LoadingBar from 'react-redux-loading-bar' Component { return <header> <LoadingBar /> </header> <section> <LoadingBar ="sectionBar" /> </section> }
Install the reducer to the store:
import combineReducers from 'redux'import loadingBarReducer from 'react-redux-loading-bar' const reducer =
redux-promise-middleware
Usage with 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 =
Usage with custom suffixes or alternative promise middleware
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 =
Usage with custom scope (for multiple loading bars)
import createStore applyMiddleware from 'redux'import loadingBarMiddleware from 'react-redux-loading-bar'import rootReducer from './reducers' const store =
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.
Usage without middleware
You can dispatch SHOW
/HIDE
actions wherever you want by importing the corresponding action creators:
import showLoading hideLoading from 'react-redux-loading-bar' // do long running stuff
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.
Usage without middleware but with scope
You need to provide the scope to the actions:
import showLoading hideLoading from 'react-redux-loading-bar' // do long running stuff
redux-saga
Usage with Install the loadingBarReducer()
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' { try const payload = // payload processing finally }
immutable-js
Usage with You can change component import line if your top level redux store object is immutable
.
import ImmutableLoadingBar as LoadingBar from 'react-redux-loading-bar' // Mount LoadingBar component as usual
Usage with jQuery Ajax Requests
If you happen to use jQuery for Ajax requests, you can dispatch SHOW
/HIDE
actions on ajaxStart
/ajaxStop
global events:
See a demo or checkout the code.
RTL (Right-To-Left) Layout
Pass direction="rtl"
to make Loading Bar simulate progress from right to left:
<LoadingBar ="rtl" />
Styling
You can apply custom styling right on the LoadingBar
component. For example you can change the color and height of the loading bar:
<LoadingBar = />
Alternatively, you can specify your own CSS class.
Please note that will disable default styling (which is background-color: red; height: 3px; position: absolute;
).
<LoadingBar ="loading" />
Don't forget to set height
, background-color
and position
for the loading
class in your CSS files.
Configure Progress Simulation
You can change updateTime (by default 200ms), maxProgress (by default 90%) and progressIncrease (by default 5%):
<LoadingBar = = = />
By default, the Loading Bar will only display if the action took longer than updateTime
to finish. This helps keep things feeling snappy, and avoids the annoyingness of showing a Loading Bar for fractions of seconds. If you want to show Loading Bar even on quickly finished actions you can pass the showFastActions
prop:
<LoadingBar />
Reset progress
You can dispatch the resetLoading
action to ultimately hide Loading Bar even when multiple long running tasks are still in progress.
Tests
npm test
Contributing
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.
Contributors (in chronological order)
- @mironov
- @ThomasMarnet
- @hieuhlc
- @josefernand
- @greenpart
- @larrydahooster
- @janslow
- @vitosamson
- @seb0zz
- @neogermi
- @MikeDevice
- @Kovensky
- @dengbupapapa
To see what has changed in recent versions of Loading Bar, see the CHANGELOG.
Licensed MIT. Copyright 2016-current Anton Mironov.