@weblif/react-top-loading-bar v2.1.2

react-top-loading-bar

Install

• using npm

npm install --save @weblif/react-top-loading-bar

• using yarn

yarn add @weblif/react-top-loading-bar

Usage

With ref

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

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 '@weblif/react-top-loading-bar'

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 + 20)}>Add 20%</button>
            <button onClick={() => setProgress(100)}>Complete</button>
            <br />
        </div>
    )
}

export default App

Demo

Click here for demo

Built-in Methods

Properties

License

MIT