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:

Code Select Expand

.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:

Code Select Expand

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

    echo '

Add after:

Code Select Expand

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

Find:

Code Select Expand

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

    echo '

Add after:

Code Select Expand

        <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

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:

Code Select Expand

.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:

Code Select Expand

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

    echo '

Add after:

Code Select Expand

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

Find:

Code Select Expand

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

    echo '

Add after:

Code Select Expand

        <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

Create easy Progress Bars