{"id":13421906,"url":"https://github.com/mironov/react-redux-loading-bar","last_synced_at":"2025-08-10T00:31:55.215Z","repository":{"id":38106460,"uuid":"56855507","full_name":"mironov/react-redux-loading-bar","owner":"mironov","description":"Loading Bar (aka Progress Bar) for Redux and React","archived":false,"fork":false,"pushed_at":"2024-01-03T20:53:18.000Z","size":13983,"stargazers_count":937,"open_issues_count":11,"forks_count":93,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-12-05T05:04:24.892Z","etag":null,"topics":["loading-bar","middleware","progress-bar","progress-simulation","promise-middleware","react","redux"],"latest_commit_sha":null,"homepage":"https://mironov.github.io/react-redux-loading-bar/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mironov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-04-22T12:58:36.000Z","updated_at":"2024-11-07T10:45:11.000Z","dependencies_parsed_at":"2024-01-18T00:30:56.250Z","dependency_job_id":"e32a4fa3-0779-469e-b13b-c1d1c55cf42d","html_url":"https://github.com/mironov/react-redux-loading-bar","commit_stats":{"total_commits":181,"total_committers":19,"mean_commits":9.526315789473685,"dds":0.4696132596685083,"last_synced_commit":"5ac2c1e7e75fd070af298cbfdd9c53f2d8f82224"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mironov%2Freact-redux-loading-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mironov%2Freact-redux-loading-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mironov%2Freact-redux-loading-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mironov%2Freact-redux-loading-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mironov","download_url":"https://codeload.github.com/mironov/react-redux-loading-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229338967,"owners_count":18057539,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loading-bar","middleware","progress-bar","progress-simulation","promise-middleware","react","redux"],"created_at":"2024-07-30T23:00:33.679Z","updated_at":"2024-12-12T06:03:47.488Z","avatar_url":"https://github.com/mironov.png","language":"JavaScript","funding_links":[],"categories":["UI Components","JavaScript","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Loader"],"readme":"# React Redux Loading Bar\n\n[![npm version](https://img.shields.io/npm/v/react-redux-loading-bar.svg?style=flat-square)](https://www.npmjs.com/package/react-redux-loading-bar)\n[![build status](https://github.com/mironov/react-redux-loading-bar/actions/workflows/ci.yml/badge.svg?branch=master\u0026event=push)](https://github.com/mironov/react-redux-loading-bar/actions/workflows/ci.yml)\n[![coverage status](https://coveralls.io/repos/github/mironov/react-redux-loading-bar/badge.svg?branch=master)](https://coveralls.io/github/mironov/react-redux-loading-bar?branch=master)\n[![npm downloads](https://img.shields.io/npm/dm/react-redux-loading-bar.svg?style=flat)](https://www.npmjs.com/package/react-redux-loading-bar)\n\nA React component that provides Loading Bar (aka Progress Bar) for long running tasks.\n\n![Demo GIF](http://d.pr/i/JbwN+)\n\nConsists of:\n\n* React component — displays loading bar and simulates progress\n* Redux reducer — manages loading bar's part of the store\n* (optional) Redux middleware — automatically shows and hides Loading Bar for actions with promises\n\n## Examples\n\nSee [Demo](http://mironov.github.io/react-redux-loading-bar/) or its [source code](https://github.com/mironov/react-redux-loading-bar/tree/gh-pages/src).\n\n## Installation\n\n```bash\nnpm install --save react-redux-loading-bar\n```\n\n## Usage\n\nMount the `LoadingBar` component anywhere in your application:\n\n```jsx\nimport LoadingBar from 'react-redux-loading-bar'\n\nexport default class Header extends React.Component {\n  render() {\n    return (\n      \u003cheader\u003e\n        \u003cLoadingBar /\u003e\n      \u003c/header\u003e\n    )\n  }\n}\n```\n\nGood news is that it doesn't include any positioning. You can attach it to the top of any block or the whole page.\n\nYou can even include multiple loading bars on the same page, that will render independently. They need to be provided with\na scope so that you can adjust them independently.\n\n```jsx\nimport LoadingBar from 'react-redux-loading-bar'\n\nexport default class Header extends React.Component {\n  render() {\n    return (\n      \u003cheader\u003e\n        \u003cLoadingBar /\u003e\n      \u003c/header\u003e\n      \u003csection\u003e\n        \u003cLoadingBar scope=\"sectionBar\" /\u003e\n      \u003c/section\u003e\n    )\n  }\n}\n```\n\nInstall the reducer to the store:\n\n```jsx\nimport { combineReducers } from 'redux'\nimport { loadingBarReducer } from 'react-redux-loading-bar'\n\nconst reducer = combineReducers({\n  // app reducers\n  loadingBar: loadingBarReducer,\n})\n```\n\n## Usage with [`redux-promise-middleware`](https://github.com/pburtchaell/redux-promise-middleware)\n\nApply middleware to automatically show and hide loading bar on actions with promises:\n\n```jsx\nimport { createStore, applyMiddleware } from 'redux'\nimport { loadingBarMiddleware } from 'react-redux-loading-bar'\nimport rootReducer from './reducers'\n\nconst store = createStore(\n  rootReducer,\n  // promise middleware\n  applyMiddleware(loadingBarMiddleware())\n)\n```\n\n## Usage with custom suffixes or alternative promise middleware\n\nYou can configure promise type suffixes that are used in your project:\n\n```jsx\nimport { createStore, applyMiddleware } from 'redux'\nimport { loadingBarMiddleware } from 'react-redux-loading-bar'\nimport rootReducer from './reducers'\n\nconst store = createStore(\n  rootReducer,\n  applyMiddleware(\n    loadingBarMiddleware({\n      promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAILURE'],\n    })\n  )\n)\n```\n\n## Usage with custom scope (for multiple loading bars)\n\n```jsx\nimport { createStore, applyMiddleware } from 'redux'\nimport { loadingBarMiddleware } from 'react-redux-loading-bar'\nimport rootReducer from './reducers'\n\nconst store = createStore(\n  rootReducer,\n  applyMiddleware(\n    loadingBarMiddleware({\n      scope: 'sectionBar',\n    })\n  )\n)\n```\n\nIf 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](https://github.com/mironov/react-redux-loading-bar/blob/master/src/loading_bar_middleware.js).\n\n## Usage without middleware\n\nYou can dispatch `SHOW`/`HIDE` actions wherever you want by importing the corresponding action creators:\n\n```jsx\nimport { showLoading, hideLoading } from 'react-redux-loading-bar'\n\ndispatch(showLoading())\n// do long running stuff\ndispatch(hideLoading())\n```\n\nYou 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.\n\n## Usage without middleware but with scope\n\nYou need to provide the scope to the actions:\n\n```jsx\nimport { showLoading, hideLoading } from 'react-redux-loading-bar'\n\ndispatch(showLoading('sectionBar'))\n// do long running stuff\ndispatch(hideLoading('sectionBar'))\n```\n\n## Usage with [`redux-saga`](https://github.com/redux-saga/redux-saga)\n\nInstall the `loadingBarReducer()` and mount Loading Bar in your application.\nYou can import and dispatch `showLoading` and `hideLoading` from your sagas.\n\n```jsx\nimport { showLoading, hideLoading } from 'react-redux-loading-bar'\n\nexport function* fetchData() {\n  try {\n    yield put(showLoading())\n    const payload = yield call(API, params)\n    // payload processing\n  } finally {\n    yield put(hideLoading())\n  }\n}\n```\n\n## Usage with [`immutable-js`](https://github.com/facebook/immutable-js)\n\nYou can change component import line if your top level redux store object is `immutable`.\n\n```jsx\nimport { ImmutableLoadingBar as LoadingBar } from 'react-redux-loading-bar'\n\n// Mount LoadingBar component as usual\n```\n\n## Usage with jQuery Ajax Requests\n\nIf you happen to use jQuery for Ajax requests, you can dispatch `SHOW`/`HIDE` actions on `ajaxStart`/`ajaxStop` global events:\n\n```jsx\n$(document).on('ajaxStart', this.props.actions.showLoading)\n$(document).on('ajaxStop', this.props.actions.hideLoading)\n```\n\nSee [a demo](http://mironov.github.io/react-redux-loading-bar/?ajax) or checkout [the code](https://github.com/mironov/react-redux-loading-bar/blob/gh-pages/src/demo_ajax.js).\n\n## RTL (Right-To-Left) Layout\n\nPass `direction=\"rtl\"` to make Loading Bar simulate progress from right to left:\n\n```jsx\n\u003cLoadingBar direction=\"rtl\" /\u003e\n```\n\n## Styling\n\nYou can apply custom styling right on the `LoadingBar` component. For example you can change the color and height of the loading bar:\n\n```jsx\n\u003cLoadingBar style={{ backgroundColor: 'blue', height: '5px' }} /\u003e\n```\n\nAlternatively, you can specify your own CSS class.\n\n**Please note that will disable default styling (which is `background-color: red; height: 3px; position: absolute;`).**\n\n```jsx\n\u003cLoadingBar className=\"loading\" /\u003e\n```\n\nDon't forget to set `height`, `background-color` and `position` for the `loading` class in your CSS files.\n\n## Configure Progress Simulation\n\nYou can change updateTime (by default 200ms), maxProgress (by default 90%) and progressIncrease (by default 5%):\n\n```jsx\n\u003cLoadingBar updateTime={100} maxProgress={95} progressIncrease={10} /\u003e\n```\n\nBy 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:\n\n```jsx\n\u003cLoadingBar showFastActions /\u003e\n```\n\n## Reset progress\n\nYou can dispatch the `resetLoading` action to ultimately hide Loading Bar even when multiple long running tasks are still in progress.\n\n## Tests\n\n```bash\nnpm test\n```\n\n## Contributing\n\nIn lieu of a formal styleguide, take care to maintain the existing coding style.\nAdd unit tests for any new or changed functionality. Lint and test your code.\n\n## Contributors (in chronological order)\n\n- [@mironov](https://github.com/mironov)\n- [@ThomasMarnet](https://github.com/ThomasMarnet)\n- [@hieuhlc](https://github.com/hieuhlc)\n- [@josefernand](https://github.com/josefernand)\n- [@greenpart](https://github.com/greenpart)\n- [@larrydahooster](https://github.com/larrydahooster)\n- [@janslow](https://github.com/janslow)\n- [@vitosamson](https://github.com/vitosamson)\n- [@seb0zz](https://github.com/seb0zz)\n- [@neogermi](https://github.com/neogermi)\n- [@MikeDevice](https://github.com/MikeDevice)\n- [@Kovensky](https://github.com/Kovensky)\n- [@dengbupapapa](https://github.com/dengbupapapa)\n\nTo see what has changed in recent versions of Loading Bar, see the [CHANGELOG](https://github.com/mironov/react-redux-loading-bar/blob/master/CHANGELOG.md).\n\nLicensed MIT. Copyright 2016-current Anton Mironov.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmironov%2Freact-redux-loading-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmironov%2Freact-redux-loading-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmironov%2Freact-redux-loading-bar/lists"}