A very simple, highly customisable react top loader component.
npm install react-top-loading-bar>
 
[![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
- 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
`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 (
);
};
`$3
jsx
import { useRef } from "react";
import LoadingBar, { LoadingBarRef } from "react-top-loading-bar";const App = () => {
// prettier-ignore
const ref = useRef(null);
return (
);
};
`$3
jsx
import { useState } from "react";
import LoadingBar from "react-top-loading-bar";const App = () => {
const [progress, setProgress] = useState(0);
return (
progress={progress}
onLoaderFinished={() => setProgress(0)}
/>
);
};
`Demo
Built-in Methods
| Methods | Parameters | Descriptions |
| ------------------------------------------- | :---------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| start(loaderType?) |
(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. |- Replace onRef prop with 'ref', assign it to a react ref. Access methods with reactRef.current.xxx
- Replace ref.current.continuousStart() with ref.current?.start()
- Replace ref.current.staticStart() with ref.current?.start("static")
MIT © Klendi Goci | klendi.dev | GitHub @klendi