Mini Mods - pace.js - smooth page loading indicator

Hi,

This mod will show a nice loading indicator on top of your forum until all elements and resources are loaded and rendered on your forum. It's also very easy to install.

1) Download the attached file and unzip it.
2) Upload the pace.min.js file to the clientscript/ folder of your forum.
3) Now go to your style manager and open the template headinclude.
4) Add the following:

PHP Code:

<script type="text/javascript" src="{vb:raw vboptions.bburl}/clientscript/pace.min.js"></script> 


5) Save.
6) Go to the CSS/additional.css template and add the following:

PHP Code:

.pace .pace-progress {
  background: #29d; /* Change this to change the bar color. */
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace-inactive {
  display: none;
} 


7) Save and you're done!

Tip: for more loading indicators and an easy way to set your color, go to http://github.hubspot.com/pace/docs/welcome/

All credits go to pace.js.

[Zachery]

No, template edits are not bad.

Template edits don't get changed/removed between versions unless you go out of your way to do the,.

[hazem_aliraqi]

Thank you