vBulletin Mods

The Official vBulletin Modifications Site
https://www.vbulletin.org/forum/showthread.php?t=312325

pace.js - smooth page loading indicator
by Dave
21 Jun 2014 18:56

1 Attachment(s)
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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.

john7911 21 Jun 2014 21:13

Thank you very much :)

hoangserip 22 Jun 2014 03:39

Can this also be used with 3.8.X?

Dave 22 Jun 2014 10:32

Quote:

Originally Posted by hoangserip (Post 2502986)
Can this also be used with 3.8.X?

This will and should work on any version, any software, any website.

Nirjonadda 05 Jul 2014 15:51

Please can you try to make without Changing a template manually?

Dave 05 Jul 2014 16:07

Quote:

Originally Posted by Nirjonadda (Post 2505336)
Please can you try to make without Changing a template manually?

I'm not sure what you mean, the only way to add this is by modifying a template.

thetechgenius 09 Jul 2014 23:10

This works perfect! Thank you! Installed and Tagged.

You can see it working on my site: https://thetechgenius.net


Edit: You can also change the theme of the Progress Bar using CSS. Check out the themes here: http://github.hubspot.com/pace/docs/welcome/

I haven't tried to change the theme yet, but I think you just copy the css and replace it in your additional css. But like I said, im not sure since I haven't tried it yet.

Edit 2: I have just tried to change the theme, and it does work. I changed my progress bar to the Barber Theme.

Here is the CSS:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Change the code in RED to match the color of your Style and to your liking.

You can go to my site for a preview of the Barber Progress Bar Theme, I changed the color and the Height of my progress bar, to best match my custom style. https://thetechgenius.net

All credit goes to the OP Dave, Thank you for this simple, yet very good mod!!

thetechgenius 09 Jul 2014 23:39

Quote:

Originally Posted by Nirjonadda (Post 2505336)
Please can you try to make without Changing a template manually?

Its not hard to edit a template, and with this you don't have to "replace" any code, your just adding code. Its really just one template your editing, the other is just adding CSS to your additional.css. It takes maybe 30secs.

Dave 10 Jul 2014 08:55

I'm glad you like it. :D

Nirjonadda 13 Aug 2014 07:38

Quote:

Originally Posted by thetechgenius (Post 2506160)
Its not hard to edit a template, and with this you don't have to "replace" any code, your just adding code. Its really just one template your editing, the other is just adding CSS to your additional.css. It takes maybe 30secs.


Template/files edits are a bad, bad thing. Every time you upgrade vB you need to edit every template/files you've done edits in. That's no fun. I hate doing any manual edits to my forum because of this.

Zachery 13 Aug 2014 09:42

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 28 Apr 2015 15:03

Thank you :)


All times are GMT. The time now is 00:44.

Powered by vBulletin® Version 3.8.14
Copyright © 2020, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright ©2001 - , vbulletin.org. All rights reserved.