JSPM – top-loading-bar@7.0.7

Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (top-loading-bar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Top Loading Bar

Support :-

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

Using npm :-

npm i top-loading-bar

Using yarn :-

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

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