React.js react-dashed-progress Example to Show Circular Dashed Progressbar Animation in Browser Using Javascript

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

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

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>

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

<DashedProgress barWidth={5} strokeThickness={15} size={150} countBars={50} value={value} />

1	<DashedProgress barWidth={5} strokeThickness={15} size={150} countBars={50} value={value} />