how-to-create-a-circular-progress-bar-with-html-css-and-java-script

In this post, I’ll show you how to implement a circular progress bar animation that enhances your website's visual appeal. Let’s get started!

1. HTML Structure

First, we define the HTML structure:

  <div class="loader">
    <div class="loader-container">
        <svg class="circleSVG">
            <circle cx="50%" cy="50%" r="100"></circle>
        </svg>
        <div class="count">0%</div>
    </div>
  </div>

2. CSS Styling

 
/* Page Loader */


.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    width: 300px;
    height: 300px;
    margin: 16px;
    border-radius: 18px;
}

.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 240px;
    width: 240px;
}

.count {
    display: flex;
    justify-content: center;
    align-items: center;
    color: yellowgreen;
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: sans-serif;
}

.circleSVG {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

circle {
    fill: none;
    stroke: yellowgreen;
    stroke-width: 8;
    stroke-dasharray: 628; /* Full circle length */
    stroke-dashoffset: 628;
    transition: stroke-dashoffset 0.1s linear;
    stroke-linecap: round;
}

3. JavaScript

 const countText = document.querySelector(".count");
const circle = document.querySelector("circle");

let count = 0;
const total = 100;  // Total count
const circumference = 2 * Math.PI * 100;  // Circle length (2 * π * r)

function updateProgress() {
    if (count <= total) {
        countText.textContent = count + "%";
        const progress = (count / total) * circumference;
        circle.style.strokeDashoffset = circumference - progress;
        count++;
        setTimeout(updateProgress, 15); // Adjust speed here
    }
}
updateProgress();

Explanation

Understanding the Structure

1. The .loader class creates the container for the animation.

2. The .loader-container holds the SVG circle and the percentage count.

SVG Circle Animation

To create the circular progress bar, we use an SVG circle with these properties:

1. cx="50%", cy="50%" (center positioning – do not change these)

2. r="100" (radius, can be adjusted as needed)

Note: If you modify the radius (r), update the JavaScript calculation accordingly:

 const circumference = 2 * Math.PI * r;

How the Animation Works

The animation is controlled using CSS properties:

1. stroke-dasharray: Defines the total length of the stroke (628 for a circle with radius 100).

2. stroke-dashoffset: Initially set to 628 (fully hidden). As the animation progresses, this value decreases, revealing the stroke.

In JavaScript:

1. We calculate progress using circumference - progress.

2. The setTimeout(updateProgress, 15) function updates the progress bar every 15 milliseconds.

3. Customization: Adjust the radius, animation speed, and colors to fit your design needs.

Learn More

For detailed explanations on stroke-dasharray and stroke-dashoffset, check out this MDN Web Docs reference.

Conclusion

We successfully created a circular progress bar animation using plain HTML, CSS, and JavaScript! 🎉 Try experimenting with different values to customize it for your project.

<div class="loader"> <div class="loader-container"> <svg class="circleSVG"> <circle cx="50%" cy="50%" r="100"></circle> </svg> <div class="count">0%</div> </div> </div>

/* Page Loader */ .loader { display: flex; justify-content: center; align-items: center; background-color: black; width: 300px; height: 300px; margin: 16px; border-radius: 18px; } .loader-container { display: flex; justify-content: center; align-items: center; position: relative; height: 240px; width: 240px; } .count { display: flex; justify-content: center; align-items: center; color: yellowgreen; font-size: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: sans-serif; } .circleSVG { transform: rotate(-90deg); width: 100%; height: 100%; } circle { fill: none; stroke: yellowgreen; stroke-width: 8; stroke-dasharray: 628; /* Full circle length */ stroke-dashoffset: 628; transition: stroke-dashoffset 0.1s linear; stroke-linecap: round; }

const countText = document.querySelector(".count"); const circle = document.querySelector("circle"); let count = 0; const total = 100; // Total count const circumference = 2 * Math.PI * 100; // Circle length (2 * π * r) function updateProgress() { if (count <= total) { countText.textContent = count + "%"; const progress = (count / total) * circumference; circle.style.strokeDashoffset = circumference - progress; count++; setTimeout(updateProgress, 15); // Adjust speed here } } updateProgress();