pace.js - smooth page loading indicator
Mod Version: 1.00, by Dave
| vB Version: 4.x.x | Rating:  (5 votes - 5.00 average) |
Installs: 27 |
| Released: 21 Jun 2014 | Last Update: 21 Jun 2014 | Downloads: 117 |
 Supported
Template Edits
Additional Files
|
||
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:
5) Save.
6) Go to the CSS/additional.css template and add the following:
7) Save and you're done!
Tip: for more loading indicators and an easy way to set your color, go to https://github.hubspot.com/pace/docs/welcome/
All credits go to https://github.hubspot.com/pace/docs/welcome/.
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>
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;
}
Tip: for more loading indicators and an easy way to set your color, go to https://github.hubspot.com/pace/docs/welcome/
All credits go to https://github.hubspot.com/pace/docs/welcome/.
Download
pace.min.zip (4.2 KB, 134 downloads)