The Joomla Training Cohort has been launched!

Please send any feedback or bug reports to  

Here is how to add a progressive reading bar to the top of your Joomla site. Thanks to Michael Russell for sharing the code on his site!



  • Video shows how to add a Progressive Reading Bar to a Joomla site.
    - Uses code provided by Michael Russell.
    - Presented by Tim Davis on the "Basic Joomla Tutorials" YouTube channel.
    - Part of the "Maintenance Monday" series.
    - Tim Davis offers Joomla site maintenance services.
    - Backend of Joomla 4 site is accessed.
    - Default editor changed from TinyMCE to CodeMirror.
    - New custom module created and code pasted in.
    - Module titled "Reading Progress Bar."
    - Module assigned to the "top" module position.
    - Module published and assigned to all pages in the menu.
    - Reading progress bar appears at the top and turns blue as the user scrolls.
    - Pro tip: CSS can be used to customize the progress bar's color and height.
    - Conclusion: Thanks Michael and invites viewers to subscribe.

Monday Maintenance 235


😴👌Watch Me Work live streams ►    • Find and Replace ...  

Here are some of the links mentioned in this Live Stream - and some others:

Contact Tim Davis ► This email address is being protected from spambots. You need JavaScript enabled to view it.

Joomla Training Cohort ► ►

MigrateMe 4 ►

Stageit for Joomla ►    • First Look at Sta...  

Backing Up Your Joomla Site with Akeeba ►    • How to Backup a J...  

Better Frontend Link ►

FOLLOW US ON TWITTER! ► @basicjoomla


Interesting blog? Like it on Facebook, Post it or share this article on other bookmarking websites.

Written by:
Tim Davis is the founder and owner of Cybersalt.
Log in to comment

Add comment

This is a privacy policy