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.

[john7911]

Thank you very much

[hoangserip]

Can this also be used with 3.8.X?

[Dave]

Originally Posted by hoangserip

Can this also be used with 3.8.X?

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

[Nirjonadda]

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

[Dave]

Originally Posted by Nirjonadda

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]

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:

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

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

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

.pace .pace-progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: -32px;
  bottom: 0;

  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  -webkit-background-size: 32px 32px;
  -moz-background-size: 32px 32px;
  -o-background-size: 32px 32px;
  background-size: 32px 32px;

  -webkit-animation: pace-stripe-animation 500ms linear infinite;
  -moz-animation: pace-stripe-animation 500ms linear infinite;
  -ms-animation: pace-stripe-animation 500ms linear infinite;
  -o-animation: pace-stripe-animation 500ms linear infinite;
  animation: pace-stripe-animation 500ms linear infinite;
}

@-webkit-keyframes pace-stripe-animation {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-moz-keyframes pace-stripe-animation {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-o-keyframes pace-stripe-animation {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-ms-keyframes pace-stripe-animation {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@keyframes pace-stripe-animation {
  0% { transform: none; transform: none; }
  100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
}

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]

Originally Posted by Nirjonadda

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]

I'm glad you like it.

[Nirjonadda]

Originally Posted by thetechgenius

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.