how to use top-loading-bar 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 (

ref.current.continuousStart()}> Start Continuous Loading Bar ref.current.staticStart()}> Start Static Loading Bar ref.current.complete()}>Complete

) } 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 (

setProgress(0)} /> setProgress(progress + 10)}>Add 10% setProgress(progress + 20)}>Add 20% setProgress(100)}>Complete

) } export default App Nextjs and Reactjs recommended frameworks

ref.current.continuousStart()}> Start Continuous Loading Bar ref.current.staticStart()}> Start Static Loading Bar ref.current.complete()}>Complete

) } 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 (

setProgress(0)} /> setProgress(progress + 10)}>Add 10% setProgress(progress + 20)}>Add 20% setProgress(100)}>Complete

) } export default App Nextjs and Reactjs recommended frameworks

Top Loading Bar

reactjs

reactjs