top-loading-bar

7.0.7 • Public • Published

Top Loading Bar

Top Loading Bar - reactjs | Product Hunt

Support :-

Using npm :-

npm i top-loading-bar

Using yarn :-

yarn add top-loading-bar

How to use this :-

With ref :-

import React, { useRef } from 'react'
import LoadingBar from 'top-loading-bar/dist'

const App = () => {
  const ref = useRef(null)

  return (
    <div>
      <LoadingBar color='#f11946' ref={ref} />
      <button onClick={() => ref.current.continuousStart()}>
        Start Continuous Loading Bar
      </button>
      <button onClick={() => ref.current.staticStart()}>
        Start Static Loading Bar
      </button>
      <button onClick={() => ref.current.complete()}>Complete</button>
      <br />
    </div>
  )
}

export default App

With state :-

import React, { useState } from 'react'
import LoadingBar from 'top-loading-bar/dist'

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

  return (
    <div>
      <LoadingBar
        color='#f11946'
        progress={progress}
        onLoaderFinished={() => setProgress(0)}
      />
      <button onClick={() => setProgress(progress + 10)}>Add 10%</button>
      <button onClick={() => setProgress(progress + 60)}>Add 70%</button>
      <button onClick={() => setProgress(progress + 20)}>Add 90%</button>
      <button onClick={() => setProgress(100)}>Complete</button>
      <br />
    </div>
  )
}

export default App

recommended frameworks are Nextjs and Reactjs

Package Sidebar

Install

npm i top-loading-bar

Weekly Downloads

11

Version

7.0.7

License

MIT

Unpacked Size

70.4 kB

Total Files

17

Last publish

Collaborators

  • _toxic_coder