Add a Reading Progress Bar to Joomla

A thin bar across the top of the screen that fills up as you read shows visitors how much of the page is left. It helps readers pace themselves through long posts. You can add one to your Joomla site with a single HTML snippet in Code Snippets.

The snippet code

This HTML snippet adds the bar, its styling, and a small script that fills it as the visitor scrolls. It measures how far down the page they are, so it works on any page of your site.

<div id="reading-progress" aria-hidden="true"></div>
<style>
  #reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    /* Bar height and color */
    height: 4px;
    background: #4f46e5;
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
  }
</style>
<script>
  (function () {
    var bar = document.getElementById('reading-progress');
    var ticking = false;

    function update() {
      // How far the visitor can scroll on this page.
      var scrollable = document.documentElement.scrollHeight - window.innerHeight;
      var progress = scrollable > 0 ? window.scrollY / scrollable : 0;

      progress = Math.min(1, Math.max(0, progress));
      bar.style.transform = 'scaleX(' + progress + ')';
      ticking = false;
    }

    function requestUpdate() {
      if (!ticking) {
        ticking = true;
        requestAnimationFrame(update);
      }
    }

    window.addEventListener('scroll', requestUpdate, { passive: true });
    window.addEventListener('resize', requestUpdate);
    window.addEventListener('load', requestUpdate);
    update();
  })();
</script>

Pages too short to scroll keep the bar hidden. To show it only on some pages, like your blog posts, open the Conditional Logic tab and set Display on to Selected Pages. Learn more in Run a snippet on specific pages.

To change the look, edit height and background in the style block. To show the bar at the bottom of the screen, change top: 0; to bottom: 0;.

How to add this snippet

1. Install Code Snippets if it isn't installed already.
2. Log into your Joomla backend.
3. Go to Components → Tassos Code Snippets.
4. Click New.
5. Enter a title, for example Reading progress bar.
6. Set Code Type to HTML.
7. Set Insertion Method to Auto-Insert Locations.
8. Set Location to Site Footer.
9. Paste the code above into the editor.
10. Click Save & Close.

Check that it works

1. Open a long page on your site.
2. Scroll down to the bottom.

The bar should fill from left to right and reach the end at the bottom of the page.

The progress bar pairs well with an estimated reading time and smooth scrolling.

To learn more about HTML snippets, read the HTML snippet docs.