SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Slim Top Progress Bar Using NProgress.js in SMF

Started by Mick., September 14, 2013, 10:01:59 AM

Previous topic - Next topic


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.


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


Add before:

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

Biology Forums

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

Biology Forums

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