Simple Machines Community Forum

A nanoscopic progress bar. You have seen the slim progress bars like on YouTube, Medium, etc. Featuring realistic trickle animations to convince your users that something is happening. Very easy to implement on SMF default theme and/or any custom theme.

Note: This has nothing to do with the page load time. It's just a visual effect.

Demo: http://www.idesign360.com/community/index.php/page,nprogress_js_slim_top_progress_bar.html

The CSS:

#nprogress {
pointer-events: none;
-webkit-pointer-events: none;
}
#nprogress .bar {
background: #72c1ae;
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 6px;
}


Download the ZIP from https://github.com/rstacruz/nprogress and extract the (2) .JS files to your theme. (jquery-1.10.js and nprogress.js)

Open your Themes/your-theme/index.template.php and find:

// Here comes the JavaScript bits!
echo '


Add after:

<script src="', $settings['theme_url'], '/jquery-1.10.js"></script>
<script src="', $settings['theme_url'], '/nprogress.js"></script>


Open your Themes/your-theme/index.template.php and find:

</body></html>';
}


Add before:

<script type="text/javascript">
             $("body").show();
             $(".version").text(NProgress.version);
                NProgress.start();
               setTimeout(function() { NProgress.done(); $(".fade").removeClass("out"); }, 2000);
</script>


I like this, but will the bar actually complete at the end of the page load (same time)?

Prolly not at the same time since this is just a visual effect. In the JavaScript you can change the load time from 2000 to 3000 or 1500 or whatever.

While looking at this again, this can be done with pure CSS and transitions. No need for JavaScript

True, too bad it's not real time. As a result, you may have to guess what your load time is, and that varies significantly from one connection to another :(