Welcome folks today in this blog post we will be using the react-dashed-progress
library to show circular dashed progressbar
animation in browser using javascript. All the full source code
of the application is shown below.
Get Started
In order to get started you need to make a new react.js
app using the below command as shown below
npx create-react-app sampleapp
cd sampleapp
And after that you need to install the below library
using the below command as shown below
npm i react-dashed-progress
And after that you will see the below directory
structure of the react.js app as shown below
Showing Simple Circular Dashed Progressbar
Now we can modify the App.js
file and copy paste the following code
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { useEffect, useState } from "react"; import { DashedProgress } from "react-dashed-progress"; export default function App() { const [value, setValue] = useState(0); useEffect(() => { setInterval(() => { if (value == 40) { setValue(0); } else { setValue(value + 10); } }, 1000); }, [value]); return ( // render the progress bar <div> <DashedProgress countBars={50} value={value} /> </div> ); } |
As you can see we are importing the react-dashed-progress
library and then we are rendering the react-dashed-progress
widget and we are passing the countBars
and value
of the progressbar. And then we are using the useEffect
hooks and inside it we are animating the dashed
progressbar and it is circular.
And we can even pass some more options
and customize the circular
progressbar and here we can change the size
and thickness of the progressbar as shown below
1 |
<DashedProgress barWidth={5} strokeThickness={15} size={150} countBars={50} value={value} /> |