📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › jQuery in Practice › Progress Bar

Progress Bar

5 min read
Animate a progress bar by changing its width with $.animate(). For real file uploads, listen to the XHR upload progress event via the xhr option in $.ajax(). Update the bar width as bytes are transferred.

Animated Progress Bar

function setProgress(pct) {
  $('#bar').animate({ width: pct + '%' }, 600);
  $('#label').text(pct + '%');
}

// Simulate upload progress
let pct = 0;
const interval = setInterval(function() {
  pct += 10;
  setProgress(pct);
  if (pct >= 100) clearInterval(interval);
}, 500);