https://github.com/klendi/react-top-loading-bar
A very simple, highly customisable youtube-like react loader component.
https://github.com/klendi/react-top-loading-bar
loading loading-bar loading-indicator preloader react react-indicators react-loader react-loading-bar reactjs youtube-loader-indicator
Last synced: 2 months ago
JSON representation
A very simple, highly customisable youtube-like react loader component.
- Host: GitHub
- URL: https://github.com/klendi/react-top-loading-bar
- Owner: klendi
- License: mit
- Created: 2018-12-21T16:38:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-02T03:17:33.000Z (about 1 year ago)
- Last Synced: 2024-05-22T17:42:32.981Z (about 1 year ago)
- Topics: loading, loading-bar, loading-indicator, preloader, react, react-indicators, react-loader, react-loading-bar, reactjs, youtube-loader-indicator
- Language: TypeScript
- Homepage: https://klendi.github.io/react-top-loading-bar/
- Size: 5.04 MB
- Stars: 674
- Watchers: 7
- Forks: 60
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - klendi/react-top-loading-bar - A very simple, highly customisable youtube-like react loader component. (TypeScript)
README
# react-top-loading-bar
>
[](https://www.npmjs.com/package/react-top-loading-bar) [](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
[](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 (
start()}>Start
complete()}>Complete
);
};
```
#### 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 (
ref.current?.continuousStart()}>
Start Continuous Loading Bar
ref.current?.staticStart()}>
Start Static Loading Bar
ref.current?.complete()}>Complete
);
};
```
### With state
```jsx
import { useState } from "react";
import LoadingBar from "react-top-loading-bar";
const App = () => {
const [progress, setProgress] = useState(0);
return (
setProgress(0)}
/>
setProgress(progress + 10)}>Add 10%
setProgress(progress + 20)}>Add 20%
setProgress(100)}>Complete
);
};
```
## 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)