The answer
Because you are updating too frequently (e.g., every 1ms) or have no CSS transition. Update every 50-100ms and add transition: width 0.3s ease. The CSS transition smooths the animation between updates.
Progress Bar Common Bugs and Fixes
Why is my progress bar animation jerky?
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.