Reading Progress Indicator

Mick in Tutorials on Nov 02, 2019

A very cool and simple scroll indicator in the top of the header using CSS and Javascript as seen right here on idesignSMF. It is also responsive and scrolls back as you go back up.

The CSS:
Open Themes/YOUR THEME OF CHOICE/css/index.css and at the very end add:

.header-progress-bar {
       position: fixed;
       top: 0;
       z-index: 9999;
       width: 100%;
       background-color: transparent;
.progress-container {
       width: 100%;
       height: 4px;
       background: transparent;
.progress-bar {
       height: 4px;
       background: #336ca6;
       width: 0%;

Open Themes/YOUR THEME OF CHOICE/index.template.php and find:

function template_body_above()
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '

Add after:

		<div class="header-progress-bar">
  <div class="progress-container">
<div class="progress-bar" id="myBar2"></div>


function template_html_below()
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '

Add after:

  // When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

  function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar2").style.width = scrolled + "%";

Reference: How To Create a Scroll Indicator

Tagged with: css html responsive script smf 


Mick G


Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Pizza.

  Connect with us:


  Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.
Commitment issues? Unsubscribe at any time.

Get 100% complete access to our entire collection and find out why 11,202 SMF owners prefer our themes


  Stay safe during this tough time!