The answer
Use XMLHttpRequest (not fetch, which does not have progress events). Listen for xhr.upload.addEventListener('progress', e => { if (e.lengthComputable) { const percent = (e.loaded / e.total) * 100; setProgress(percent); } }).
Progress Bar Use Cases and Real-World Examples
How do you show file upload progress in JavaScript?
More FAQs in Progress Bar Use Cases and Real-World Examples
File upload (XHR progress event), form completion (filled inputs / total), multi-step wizard (current step / total), loading data (spinner), countdown timer (remaining / total), and scroll progress (scrollTop / scrollHeight).
Count filled required inputs: const filled = Array.from(inputs).filter(i => i.value).length. Set progress to (filled / total) * 100. Update on every input change.
On scroll, calculate: const percent = (scrollTop / (scrollHeight - innerHeight)) * 100. Set the progress bar width to this percentage. Attach to window scroll event.
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.