How do you show scroll progress as a reading indicator?
On scroll, calculate: const percent = (scrollTop / (scrollHeight - innerHeight)) * 100. Set the progress bar width to this percentage. Attach to window scroll event.
Verify This Answer
Cross-check this information using these trusted sources:
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).
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); } }).
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.
Still have questions?
Browse all our FAQs or reach out to our support team