How to create a reading bar in your Joomla website

You may have noticed when you scroll down the pages in the magazine that there's a blue-coloured bar (just below the menu items at the top of the page) that moves.

This bar is sometimes called a “reading progress bar” and there are a number of extensions you can obtain that will do this. Without knowing anything more than how to copy and paste, you can do the same thing with your Joomla websites with a custom HTML module in a couple of minutes.

Create a custom HTML module

There are many ways you can incorporate this feature in your Joomla website but this is how I achieved it with a Custom HTML module. The techique involves three lines of HTML, sixteen lines of CSS and seven lines of Javascript and they’re located in the one place. The source code for the module appears below:

<div class="progress-container">
<div id="myBar" class="progress-bar">&nbsp;</div>
</div>



<style>
 .progress-container {
    position: fixed;
    top: 0px;
    z-index: 2000;
    width: 100%;
    background-color: #f5f5f5 !important;
    width: 100%;
    height: 4px;
    background: #ccc;
 }

 .progress-bar {
    height: 4px;
    background: #57b4fc;
    width: 0%;
    margin-bottom: 4px;
 }
</style>


<script type="text/javascript">

// When the user scrolls the page, execute progressiveScroll
window.addEventListener('scroll', progressiveScroll);

function progressiveScroll() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

You need to give this module a title (e.g. “Progressive scroll bar”) and assign it to a template position, preferably at the very top of the page. The only remaining step is to assign this module to the pages—the menu items—in your Joomla website.

You can experiment with different template positions and pages as you feel are appropriate to your own wants and needs.

That’s all there is to it. Enjoy.

Other resources:

There is a video tutorial produced by Tim Davis available on YouTube: https://www.youtube.com/watch?v=ZLIENKdFNI

This article is based on previously published original work at the author's website

Translations

Read this in German: Ein Lese-Fortschrittsbalken für deine Joomla-Seite