https://github.com/vikram2009/top-loading-bar

top loading bar for javascirpt frameworks
https://github.com/vikram2009/top-loading-bar

js mit mit-licence next next-ts npm npmp package reactjs redwoodjs top-loading-bar ts vitejs vitejs-react-typescript yarn

Last synced: 7 days ago
JSON representation

top loading bar for javascirpt frameworks

• Host: GitHub
• URL: https://github.com/vikram2009/top-loading-bar
• Owner: vikram2009
• License: mit
• Created: 2022-10-03T14:18:24.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-06T13:32:56.000Z (over 2 years ago)
• Last Synced: 2025-01-31T01:02:08.801Z (7 days ago)
• Topics: js, mit, mit-licence, next, next-ts, npm, npmp, package, reactjs, redwoodjs, top-loading-bar, ts, vitejs, vitejs-react-typescript, yarn
• Homepage: https://www.npmjs.com/package/top-loading-bar
• Size: 25.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
## Top Loading Bar 



Support :- 

- email : [email protected] 

- website: https://vikramsrinivas.me

- Fell free to open PR and Issues

           

Using npm :-

```bash

npm i top-loading-bar

```

Using yarn :-

```bash

yarn 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 :-

```jsx

import React, { useRef } from 'react'

import LoadingBar from 'top-loading-bar/dist'

const App = () => {

  const ref = useRef(null)

  return (

    


      

       ref.current.continuousStart()}>

        Start Continuous Loading Bar

      

       ref.current.staticStart()}>

        Start Static Loading Bar

      

       ref.current.complete()}>Complete

      


    

  )

}


export default App

```

With state :-

```jsx

import React, { useState } from 'react'

import LoadingBar from 'top-loading-bar/dist'

const App = () => {

  const [progress, setProgress] = useState(0)

  return (

    


       setProgress(0)}

      />

       setProgress(progress + 10)}>Add 10%

       setProgress(progress + 60)}>Add 70%

       setProgress(progress + 20)}>Add 90%

       setProgress(100)}>Complete

      


    

  )

}


export default App

```

recommended frameworks are Nextjs and Reactjs