react-top-loading-bar

A very simple, highly customisable youtube-like react loader component.

Progress / Spinner
klendi/react-top-loading-barklendi.github.io/react-top-loading-bar/react-top-loading-bar

README

react-top-loading-bar


>
NPM JavaScript Style Guide [![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

Install


- using npm

  1. ``` sh
  2. npm install --save react-top-loading-bar
  3. ```

- using yarn

  1. ``` sh
  2. yarn add react-top-loading-bar
  3. ```

- CDN

  1. ```
  2. https://unpkg.com/react-top-loading-bar
  3. ```

Usage


With ref


  1. ``` js
  2. import React, { useRef } from 'react'
  3. import LoadingBar from 'react-top-loading-bar'

  5. const App = () => {
  6.   const ref = useRef(null)

  8.   return (
  9.     <div>
  10.       <LoadingBar color='#f11946' ref={ref} />
  11.       <button onClick={() => ref.current.continuousStart()}>
  12.         Start Continuous Loading Bar
  13.       </button>
  14.       <button onClick={() => ref.current.staticStart()}>
  15.         Start Static Loading Bar
  16.       </button>
  17.       <button onClick={() => ref.current.complete()}>Complete</button>
  18.       <br />
  19.     </div>
  20.   )
  21. }

  23. export default App
  24. ```

With state


  1. ``` js
  2. import React, { useState } from 'react'
  3. import LoadingBar from 'react-top-loading-bar'

  5. const App = () => {
  6.   const [progress, setProgress] = useState(0)

  8.   return (
  9.     <div>
  10.       <LoadingBar
  11.         color='#f11946'
  12.         progress={progress}
  13.         onLoaderFinished={() => setProgress(0)}
  14.       />
  15.       <button onClick={() => setProgress(progress + 10)}>Add 10%</button>
  16.       <button onClick={() => setProgress(progress + 20)}>Add 20%</button>
  17.       <button onClick={() => setProgress(100)}>Complete</button>
  18.       <br />
  19.     </div>
  20.   )
  21. }

  23. export default App
  24. ```

Demo


Click here for demo

Built-in Methods


MethodsParametersDescriptions
-------------------------------------------:---------------------------------:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
add(value)NumberAdds
decrease(value)NumberDecreases
continuousStart(startingValue,NumberStarts
staticStart(startingValue)NumberStarts
complete()|

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.                                                         |

Projects using react-top-loading-bar


- React Movies
- WCYB

Add your own project. Make a PR

Migrate from V.1


- Replace onRef prop with 'ref', assign it to a react ref. Access methods with reactRef.current.xxx

Code Style

js-standard-style

License


MIT © Klendi Gocci | klendi.dev