The answer
Because the container does not have overflow: hidden. Add overflow: hidden and border-radius to the container. This clips the progress bar to the container's boundaries.
Progress Bar Common Bugs and Fixes
Why does my progress bar overflow its container?
More FAQs in Progress Bar Common Bugs and Fixes
Because you are not clamping the value. Fix: percent = Math.max(0, Math.min(100, percent)). This ensures the value never goes below 0 or above 100.
Because you do not have a CSS transition on the width property. Add: transition: width 0.3s ease to the progress bar's CSS. When you change the width via JavaScript, the browser animates it.
Because you are not clearing the interval. Add: if (progress >= 100) clearInterval(interval). Without this, the interval keeps running, wasting resources and potentially causing bugs.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.