Top Loading Bar

Support :-

• email : vikramksm@hotmail.com
• website: https://vikramsrinivas.me
• Fell free to open PR and Issues

Using npm :-

1npm i top-loading-bar

Using yarn :-

1yarn add top-loading-bar

How to use this :-

• demo repo :- https://github.com/vikram2009/top-loading-bar_demo
• demo website :- https://top-loading-bar-demo.vercel.app/

With ref :-

1import React, { useRef } from 'react'
2import LoadingBar from 'top-loading-bar/dist'
3
4const App = () => {
5  const ref = useRef(null)
6
7  return (
8    <div>
9      <LoadingBar color='#f11946' ref={ref} />
10      <button onClick={() => ref.current.continuousStart()}>
11        Start Continuous Loading Bar
12      </button>
13      <button onClick={() => ref.current.staticStart()}>
14        Start Static Loading Bar
15      </button>
16      <button onClick={() => ref.current.complete()}>Complete</button>
17      <br />
18    </div>
19  )
20}
21
22export default App

With state :-

1import React, { useState } from 'react'
2import LoadingBar from 'top-loading-bar/dist'
3
4const App = () => {
5  const [progress, setProgress] = useState(0)
6
7  return (
8    <div>
9      <LoadingBar
10        color='#f11946'
11        progress={progress}
12        onLoaderFinished={() => setProgress(0)}
13      />
14      <button onClick={() => setProgress(progress + 10)}>Add 10%</button>
15      <button onClick={() => setProgress(progress + 60)}>Add 70%</button>
16      <button onClick={() => setProgress(progress + 20)}>Add 90%</button>
17      <button onClick={() => setProgress(100)}>Complete</button>
18      <br />
19    </div>
20  )
21}
22
23export default App

recommended frameworks are Nextjs and Reactjs