Page Scroll Progress Bar | Progress Bar On Scroll | vanilla JavaScript

In this video, I'll show you how to create page scroll progress bar. If you're delivering your knowledge, views & opinions through your blogs, news articles, etc. In order to provide better user experience for your audience, page scroll progress bar can be one option.

📢 SUBSCRIBE my channel for more helpful 🎬videos

▶part of Playlist

🌎 Browser : Brave V.1.46 (Chrome V.103.0)
📝 Code Editor : VS Code
💠 Extensions : Live-Server

#progressbar #scroll

[CodingDesign]

⚠ Warning
@13:30
Instead of manually giving "__2.5 rem__" total height of ":before" pseudo element

We can calcuate it's actual "height" including "padding"

⏏Update <Code> line no. 31
const { paddingTop, paddingBottom, height: progressHeight } = getComputedStyle(navbar, ':after');
const progress_bar_height = parseFloat(paddingTop) + parseFloat(paddingBottom) + parseFloat(progressHeight);

// change css unit "rem" to "px".
navbar.style.cssText = `--shadow: -${scrolled_percent / 100 * progress_bar_height}px;`;