Circular Progress Bar Using SVG, HTML, CSS and JS

By /

In this video tutorial, we’ll learn how to create a circular progress bar using svg, html, css and javascript.

Let’s first create a svg of width and height of 250 pixels. And add 2 circle’s with radius of 100 pixels. Add ‘track’ and ‘progress’ as their class names, respectively.

<svg width="250" height="250">
      <circle r="100" cx="125" cy="125" class="track"></circle>
      <circle r="100" cx="125" cy="125" class="progress"></circle>
</svg>

Set the following CSS properties within ‘track’ and ‘progress’:

.track {
      stroke-width: 1;
      stroke: lightgrey;
      fill: none;
 }

.progress {
      stroke-width: 10;
      stroke: rgb(59, 56, 56);
     fill: none;
}

Let’s write a small javascript code to make a dynamic progress bar which ranges from 0 to 100%.

Target the .progress class and get it’s radius and calculate the circumference of the circle, like so:

let progressCircle = document.querySelector(".progress");
let radius = progressCircle.r.baseVal.value;
//circumference of a circle = 2πr;
let circumference = radius * 2 * Math.PI;

Assign this circumference value to ‘stroke-dasharray’ CSS property:

progressCircle.style.strokeDasharray = circumference;

Now, let’s write a small function which creates the dynamic circular progress bar:

//0 to 100
setProgress(95);
function setProgress(percent) {
     progressCircle.style.strokeDashoffset = circumference - (percent / 100) * circumference;
}

Watch the video to get complete guide on how it works.

Thanks for visiting and watching. Like, share and subscribe for more such videos. Cheers!

19 thoughts on “Circular Progress Bar Using SVG, HTML, CSS and JS”

  2. 카지노사이트

    Magnificent beat ! I would like to apprentice whilst you amend your website, how could i subscribe for
    a weblog website? The account aided me a applicable deal.
    I had been tiny bit familiar off this your broadcast offered
    bright clear idea

    Also visit mmy webpage; 카지노사이트

    Reply
  5. praca białystok

    Hello there! This is kind of off topic but I need some hlp from an established blog.
    Is it tough to set up your own blog? I’m not very techincal
    but I can fiigure things out pretty quick. I’m thinking about making my oown but I’m not sure where to begin. Do you havfe any
    points or suggestions? Thank you

    Feel free too visit my web blog: praca białystok

    Reply
  15. 看儿童色情片

    Hi, just required you to know I he added your site to my Google bookmarks due to your layout. But seriously, I believe your internet site has 1 in the freshest theme I??ve came across.儿童色情

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top