Reading Progress Indicator

in Tutorials on 02 Nov 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>
          </div> 
        </div>

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

    echo '

Add after:
        <script>
                              // 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 + "%";
                              }
        </script>

Reference: How To Create a Scroll Indicator



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

PixelfyStudio.com | SimpleMachines.org




0 Comments


You might also like


Tutorials. We have a great selection of tutorials to help you make the most of your theme.