{"id":13455416,"url":"https://github.com/klendi/react-top-loading-bar","last_synced_at":"2025-10-18T12:44:39.218Z","repository":{"id":33814826,"uuid":"162736406","full_name":"klendi/react-top-loading-bar","owner":"klendi","description":"A very simple, highly customisable youtube-like react loader component.","archived":false,"fork":false,"pushed_at":"2024-05-02T03:17:33.000Z","size":5280,"stargazers_count":674,"open_issues_count":12,"forks_count":60,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-22T17:42:32.981Z","etag":null,"topics":["loading","loading-bar","loading-indicator","preloader","react","react-indicators","react-loader","react-loading-bar","reactjs","youtube-loader-indicator"],"latest_commit_sha":null,"homepage":"https://klendi.github.io/react-top-loading-bar/","language":"TypeScript","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/klendi.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-21T16:38:30.000Z","updated_at":"2024-06-18T12:32:00.800Z","dependencies_parsed_at":"2024-05-02T04:36:35.654Z","dependency_job_id":"61c2be9b-5351-484e-a4c4-e71f41e2ec2c","html_url":"https://github.com/klendi/react-top-loading-bar","commit_stats":{"total_commits":58,"total_committers":18,"mean_commits":"3.2222222222222223","dds":0.5517241379310345,"last_synced_commit":"94fd00f8959af6ac8a3b35849e074148b02db361"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klendi%2Freact-top-loading-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klendi%2Freact-top-loading-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klendi%2Freact-top-loading-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klendi%2Freact-top-loading-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/klendi","download_url":"https://codeload.github.com/klendi/react-top-loading-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221947566,"owners_count":16906148,"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","loading-bar","loading-indicator","preloader","react","react-indicators","react-loader","react-loading-bar","reactjs","youtube-loader-indicator"],"created_at":"2024-07-31T08:01:05.202Z","updated_at":"2025-10-18T12:44:34.163Z","avatar_url":"https://github.com/klendi.png","language":"TypeScript","funding_links":[],"categories":["Javascript - React.js","TypeScript"],"sub_categories":[],"readme":"# react-top-loading-bar\n\n\u003e\n\n[![NPM](https://img.shields.io/npm/v/react-top-loading-bar.svg)](https://www.npmjs.com/package/react-top-loading-bar) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![npm download][download-image]][download-url]\n\n[download-image]: https://img.shields.io/npm/dm/react-top-loading-bar.svg\n[download-url]: https://npmjs.org/package/react-top-loading-bar\n\n[![react-top-loading-bar](https://nodei.co/npm/react-top-loading-bar.png)](https://npmjs.org/package/react-top-loading-bar)\n\n## Install\n\n- using npm\n\n```bash\nnpm install --save react-top-loading-bar\n```\n\n- using yarn\n\n```bash\nyarn add react-top-loading-bar\n```\n\n- CDN\n\n```\nhttps://unpkg.com/react-top-loading-bar\n```\n\n## Usage\n\n### Using hooks\n\n```jsx\nimport { useLoadingBar } from \"react-top-loading-bar\";\n\nconst App = () =\u003e {\n  const { start, complete } = useLoadingBar({\n    color: \"blue\",\n    height: 2,\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e start()}\u003eStart\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e complete()}\u003eComplete\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n#### Wrap the app with LoadingBarContainer\n\n```jsx\nimport { LoadingBarContainer } from \"react-top-loading-bar\";\n\nconst Parent = () =\u003e {\n  return (\n    \u003cLoadingBarContainer\u003e\n      \u003cApp /\u003e\n    \u003c/LoadingBarContainer\u003e\n  );\n};\n```\n\n### With ref\n\n```jsx\nimport { useRef } from \"react\";\nimport LoadingBar, { LoadingBarRef } from \"react-top-loading-bar\";\n\nconst App = () =\u003e {\n  // prettier-ignore\n  const ref = useRef\u003cLoadingBarRef\u003e(null);\n\n  return (\n    \u003cdiv\u003e\n      \u003cLoadingBar color=\"#f11946\" ref={ref} shadow={true} /\u003e\n      \u003cbutton onClick={() =\u003e ref.current?.continuousStart()}\u003e\n        Start Continuous Loading Bar\n      \u003c/button\u003e\n      \u003cbutton onClick={() =\u003e ref.current?.staticStart()}\u003e\n        Start Static Loading Bar\n      \u003c/button\u003e\n      \u003cbutton onClick={() =\u003e ref.current?.complete()}\u003eComplete\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### With state\n\n```jsx\nimport { useState } from \"react\";\nimport LoadingBar from \"react-top-loading-bar\";\n\nconst App = () =\u003e {\n  const [progress, setProgress] = useState(0);\n\n  return (\n    \u003cdiv\u003e\n      \u003cLoadingBar\n        color=\"#f11946\"\n        progress={progress}\n        onLoaderFinished={() =\u003e setProgress(0)}\n      /\u003e\n      \u003cbutton onClick={() =\u003e setProgress(progress + 10)}\u003eAdd 10%\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e setProgress(progress + 20)}\u003eAdd 20%\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e setProgress(100)}\u003eComplete\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Demo\n\n[Click here for demo](https://klendi.github.io/react-top-loading-bar/)\n\n## Built-in Methods\n\n| Methods                                     |             Parameters              | Descriptions                                                                                                                                                                                                                |\n| ------------------------------------------- | :---------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| start(loaderType?)                          | `continuous` (default) or `static`  | Starts the loading indicator. If type is \"static\" it will start the static bar otherwise it will start the animated continuous bar.                                                                                         |\n| continuousStart(startingValue, refreshRate) | Number (optional), Number(optional) | Starts the loading indicator with a random starting value between 20-30, then repetitively after an refreshRate, increases it by a random value between 2-10. This continues until it reaches 90% of the indicator's width. |\n| staticStart(startingValue)                  |          Number (optional)          | Starts the loading indicator with a random starting value between 30-50.                                                                                                                                                    |\n| complete()                                  |                                     | Makes the loading indicator reach 100% of his width and then fade.                                                                                                                                                          |\n| increase(value)                             |               Number                | Adds a value to the loading indicator.                                                                                                                                                                                      |\n| decrease(value)                             |               Number                | Decreases a value to the loading indicator.                                                                                                                                                                                 |\n| getProgress()                               |                                     | Get the current progress value.                                                                                                                                                                                             |\n\n## Properties\n\n| Property           | Type          | Default       | Description                                                                                                                       |\n| :----------------- | :------------ | :------------ | :-------------------------------------------------------------------------------------------------------------------------------- |\n| progress           | Number        | `0`           | The progress/width indicator, progress prop varies from `0` to `100`.                                                             |\n| color              | String        | `red`         | The color of the loading bar, color take values like css property `background:` do, for example `red`, `#000` `rgb(255,0,0)` etc. |\n| shadow             | Boolean       | `true`        | Enables / Disables shadow underneath the loader.                                                                                  |\n| height             | Number        | `2`           | The height of the loading bar in pixels.                                                                                          |\n| background         | String        | `transparent` | The loader parent background color.                                                                                               |\n| style              | CSSProperties |               | The style attribute to loader's div                                                                                               |\n| containerStyle     | CSSProperties |               | The style attribute to loader's container                                                                                         |\n| shadowStyle        | CSSProperties |               | The style attribute to loader's shadow                                                                                            |\n| transitionTime     | Number        | `300`         | Fade transition time in miliseconds.                                                                                              |\n| loaderSpeed        | Number        | `500`         | Loader transition speed in miliseconds.                                                                                           |\n| waitingTime        | Number        | `1000`        | The delay we wait when bar reaches 100% before we proceed fading the loader out.                                                  |\n| className          | String        |               | You can provide a class you'd like to add to the loading bar to add some styles to it                                             |\n| containerClassName | String        |               | You can provide a class you'd like to add to the loading bar container to add some css styles                                     |\n| onLoaderFinished   | Function      |               | This is called when the loading bar completes, reaches 100% of his width.                                                         |\n\n## Migrate from V.1\n\n- Replace onRef prop with 'ref', assign it to a react ref. Access methods with reactRef.current.xxx\n\n## Migrate from V.2\n\n- Replace ref.current.continuousStart() with ref.current?.start()\n- Replace ref.current.staticStart() with ref.current?.start(\"static\")\n\n## License\n\nMIT © [Klendi Goci](https://klendi.dev) | [klendi.dev](https://klendi.dev) | GitHub [@klendi](https://github.com/klendi)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklendi%2Freact-top-loading-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fklendi%2Freact-top-loading-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklendi%2Freact-top-loading-bar/lists"}