Create an Interactive Progress Wheel with HTML, CSS & JavaScript

Want to add a dynamic progress wheel to your website? This interactive progress indicator updates in real time as you adjust a slider, providing a visually engaging way to represent progress.

Using HTML, CSS, and JavaScript, we’ll build a circular progress bar that dynamically updates based on user input. This is perfect for dashboards, loading indicators, and interactive UI components!

---

What You’ll Learn

✅ HTML structure for the progress wheel and slider 📄
✅ CSS conic gradients to create a modern circular progress effect 🎨
✅ JavaScript logic to sync slider input with the progress display 🔄
✅ Dynamic animations to enhance user experience 🌟
✅ Customization tips to match your website’s design 🛠️

---

Step 1: Setting Up the HTML

First, create a simple HTML structure for the progress wheel and slider.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Progress Wheel</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Interactive Progress Wheel</h1>
  <div class="progress-container" id="progress-container">
    <div class="progress-text" id="progress-text">0%</div>
  </div>

  <div class="slider-container">
    <label for="progress-slider">Adjust Progress:</label>
    <input type="range" id="progress-slider" min="0" max="100" value="0">
  </div>

  <script src="script.js"></script>
</body>
</html>

✔ Includes a circular progress indicator
✔ Adds a slider to adjust the progress dynamically
✔ Links external CSS and JavaScript for better organization

---

Step 2: Styling with CSS

Now, let’s apply CSS styles to create a beautiful progress wheel effect.

/* General Styling */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

/* Heading */
h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 30px;
}

/* Circular Progress Container */
.progress-container {
  position: relative;
  width: 200px;
  height: 200px;
  background: conic-gradient(#4caf50 0% 0%, #ddd 0% 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

/* Progress Percentage Text */
.progress-text {
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* Slider Container */
.slider-container {
  margin-top: 50px;
  text-align: center;
}

input[type="range"] {
  width: 100%;
  max-width: 300px;
}

✔ Uses conic-gradient for a smooth circular progress effect
✔ Centers the progress percentage inside the wheel
✔ Adds a stylish shadow effect for better visibility

---

Step 3: Adding JavaScript for Interactivity

Now, we’ll use JavaScript to dynamically update the progress wheel based on the slider value.

const progressContainer = document.getElementById("progress-container");
const progressText = document.getElementById("progress-text");
const progressSlider = document.getElementById("progress-slider");

progressSlider.addEventListener("input", (e) => {
  const progressValue = e.target.value;
  progressText.textContent = `${progressValue}%`;
  progressContainer.style.background = `conic-gradient(
    #4caf50 ${progressValue * 3.6}deg, 
    #ddd ${progressValue * 3.6}deg
  )`;
});

✔ Tracks the slider value and updates the progress text
✔ Dynamically changes the circular gradient to reflect progress
✔ Creates a smooth and interactive user experience

---

How It Works 🎥

🎡 The circular progress wheel updates in real time
🖱️ Users can adjust the slider to change the progress value
🔄 A conic gradient visually represents the progress

---

Customization Tips

🎨 Change the progress color:
Modify #4caf50 in conic-gradient to your preferred color.

⚡ Adjust the progress speed:
Use transition: background 0.3s ease-out; in CSS for smoother updates.

🔄 Increase or decrease size:
Modify .progress-container width & height for different sizes.

📊 Use for different applications:
Customize this effect for loading indicators, skill meters, or fitness tracking.

---

Final Output: A Stunning Interactive Progress Wheel!

This effect enhances user engagement and adds a modern UI element to your website. Perfect for dashboards, progress tracking, and loading animations! 🚀

---

Watch the Full Video Tutorial 🎥

Follow along with a step-by-step video guide!

---

Download the Full Code

Get the complete source code on GitHub:

🔗 GitHub – Interactive Progress Wheel

---

Conclusion

In this tutorial, you learned how to create a smooth, interactive circular progress wheel using HTML, CSS, and JavaScript.

💡 Next Steps:
✔ Experiment with different color schemes 🎨
✔ Use the effect for progress tracking, skill bars, or loading screens 🚀
✔ Combine with other UI animations for a unique experience ✨

---

Did you enjoy this tutorial?

💡 Like this post
💬 Comment your thoughts
🔔 Subscribe for more web development tutorials!

🚀 Happy Coding! 🎡💻✨