# react-top-loading-bar > [![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) [![npm download][download-image]][download-url] [download-image]: https://img.shields.io/npm/dm/react-top-loading-bar.svg [download-url]: https://npmjs.org/package/react-top-loading-bar [![react-top-loading-bar](https://nodei.co/npm/react-top-loading-bar.png)](https://npmjs.org/package/react-top-loading-bar) ## Install - using npm ```bash npm install --save react-top-loading-bar ``` - using yarn ```bash yarn add react-top-loading-bar ``` - CDN ``` https://unpkg.com/react-top-loading-bar ``` ## Usage ### Using hooks ```jsx import { useLoadingBar } from "react-top-loading-bar"; const App = () => { const { start, complete } = useLoadingBar({ color: "blue", height: 2, }); return (

); }; ``` #### Wrap the app with LoadingBarContainer ```jsx import { LoadingBarContainer } from "react-top-loading-bar"; const Parent = () => { return ( ); }; ``` ### With ref ```jsx import { useRef } from "react"; import LoadingBar, { LoadingBarRef } from "react-top-loading-bar"; const App = () => { // prettier-ignore const ref = useRef(null); return (

); }; ``` ### With state ```jsx import { useState } from "react"; import LoadingBar from "react-top-loading-bar"; const App = () => { const [progress, setProgress] = useState(0); return (

setProgress(0)} />

); }; ``` ## Demo [Click here for demo](https://klendi.github.io/react-top-loading-bar/) ## Built-in Methods | Methods | Parameters | Descriptions | | ------------------------------------------- | :---------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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. | | 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. | | staticStart(startingValue) | Number (optional) | Starts the loading indicator with a random starting value between 30-50. | | complete() | | Makes the loading indicator reach 100% of his width and then fade. | | increase(value) | Number | Adds a value to the loading indicator. | | decrease(value) | Number | Decreases a value to the loading indicator. | | getProgress() | | Get the current progress value. | ## Properties | Property | Type | Default | Description | | :----------------- | :------------ | :------------ | :-------------------------------------------------------------------------------------------------------------------------------- | | progress | Number | `0` | The progress/width indicator, progress prop varies from `0` to `100`. | | 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. | | shadow | Boolean | `true` | Enables / Disables shadow underneath the loader. | | height | Number | `2` | The height of the loading bar in pixels. | | background | String | `transparent` | The loader parent background color. | | style | CSSProperties | | The style attribute to loader's div | | containerStyle | CSSProperties | | The style attribute to loader's container | | shadowStyle | CSSProperties | | The style attribute to loader's shadow | | transitionTime | Number | `300` | Fade transition time in miliseconds. | | loaderSpeed | Number | `500` | Loader transition speed in miliseconds. | | waitingTime | Number | `1000` | The delay we wait when bar reaches 100% before we proceed fading the loader out. | | className | String | | You can provide a class you'd like to add to the loading bar to add some styles to it | | containerClassName | String | | You can provide a class you'd like to add to the loading bar container to add some css styles | | onLoaderFinished | Function | | This is called when the loading bar completes, reaches 100% of his width. | ## Migrate from V.1 - Replace onRef prop with 'ref', assign it to a react ref. Access methods with reactRef.current.xxx ## Migrate from V.2 - Replace ref.current.continuousStart() with ref.current?.start() - Replace ref.current.staticStart() with ref.current?.start("static") ## License MIT © [Klendi Goci](https://klendi.dev) | [klendi.dev](https://klendi.dev) | GitHub [@klendi](https://github.com/klendi)

パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス

react-top-loading-bar	71,247	731	70.3 kB	4	6ヶ月前	MIT