# Reading Progress Bar

> Shows a thin bar at the top of the window that fills up as the visitor scrolls through the page.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: html, javascript, ux, reading
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/reading-progress-bar/

## Code

```html
<div id="wpide-progress" aria-hidden="true"></div>
<style>
#wpide-progress{position:fixed;top:0;left:0;height:3px;width:0;background:#2271b1;z-index:100000;transition:width .1s linear;}
.admin-bar #wpide-progress{top:32px;}
@media screen and (max-width:782px){.admin-bar #wpide-progress{top:46px;}}
</style>
<script>
(function () {
    var bar = document.getElementById('wpide-progress');
    if (!bar) { return; }
    var update = function () {
        var doc = document.documentElement;
        var max = doc.scrollHeight - doc.clientHeight;
        bar.style.width = (max > 0 ? (doc.scrollTop / max) * 100 : 0) + '%';
    };
    window.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    update();
})();
</script>
```

## Notes

Change #2271b1 to your brand color. Add conditional logic to show it only on posts.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Reading Progress Bar" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/