How to Create a Circular Progress Bar with HTML, CSS, and JavaScript

A circular progress bar is a visually appealing way to represent progress in percentages. In this tutorial, you’ll learn how to create a dynamic and animated circular progress bar using HTML, CSS, and JavaScript. This effect is perfect for dashboards, loading indicators, and interactive UI elements.

What You’ll Learn

✅ How to create a circular progress bar using HTML and CSS 🛠️
✅ Styling the progress circle and percentage display for a modern look 🎨
✅ Animating the progress with JavaScript for real-time updates ⏱️
✅ Customizing the progress bar’s design and speed to fit your needs ⚡
✅ Making the progress bar fully interactive with dynamic updates 🖱️

---

Step 1: HTML Structure

Create a simple structure to hold the circular progress bar and the percentage text.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circular Progress Bar</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f0f0f0;
      flex-direction: column;
    }

    h1 {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }

    .progress-wrapper {
      position: relative;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: conic-gradient(#4d5bf9 calc(var(--progress) * 1%), #dcdfe6 0);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .progress-wrapper::before {
      content: '';
      position: absolute;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background-color: #fff;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }

    .percentage {
      position: absolute;
      font-size: 30px;
      color: #4d5bf9;
      font-weight: bold;
      z-index: 2;
    }
  </style>
</head>
<body>
  <h1>Circular Progress Bar Animation</h1>
  <div class="progress-wrapper" style="--progress: 75;">
    <div class="percentage">75%</div>
  </div>

  <script>
    let progress = 0;
    const progressWrapper = document.querySelector('.progress-wrapper');
    const percentageText = document.querySelector('.percentage');

    function updateProgress() {
      if (progress <= 100) {
        progress++;
        progressWrapper.style.setProperty('--progress', progress);
        percentageText.textContent = `${progress}%`;
      }
    }

    setInterval(updateProgress, 50); // Update progress every 50ms
  </script>
</body>
</html>

---

Step 2: Explanation

HTML:

• The div with the class .progress-wrapper is the container for the circular progress.
• Inside the container, the .percentage displays the numeric progress.

CSS:

• The conic-gradient property is used to create the circular effect dynamically.
• The --progress CSS variable determines how much of the circle is filled.
• A pseudo-element (::before) is used to create the inner white space, making it look like a ring.

JavaScript:

• The script updates the --progress variable dynamically from 0 to 100.
• setInterval(updateProgress, 50); gradually increases the progress value.

---

Demo Video & Code Repository

🎥 Watch the tutorial video here:

💻 Download the full source code from GitHub:
GitHub Repository

---

Conclusion

By following this tutorial, you’ve successfully created a stylish, animated circular progress bar using HTML, CSS, and JavaScript. This effect is perfect for enhancing user engagement on dashboards, forms, and interactive web applications.

Try customizing the colors, size, and speed to match your project requirements. If you found this tutorial helpful, don’t forget to like, comment, and subscribe to Madras Academy for more web development tips and tutorials! 🚀

#HTML #CSS #JavaScript #WebDesign #Animation #ProgressBar #WebDevelopment #FrontendDevelopment #TechTutorial