April 10, 2014

Weebly Tricks #47 - Best Progress Bars from PACE

Posted by Domingo Tambasacan at 4/10/2014

Best Progress Bars for Weebly



Everybody knows YouTube and if you've noticed, as of now, they are using a simple progress bar running on top of the page while it loads. Well, you can easily  insert same effect to your Weebly site with of course a lot of designs to choose from. Check out the demo, it uses the "Barber Shop" style. 









1. Download the pace.js below by simply right clicking on it and choose "save" link as".


2. Now you're going to upload it to your template by going to Weebly > Design > Edit CSS/HTML > add new file, select the pace.js on its download location and hit enter.

3. I do recommend placing this progress bar to your whole site. Simply go to Weebly > Settings > SEO > Header code. From the box given, please paste the following code:

<script type="text/javascript">
    paceOptions = {
      elements: true
    };
  </script>
  <script src="http://myweeblytricksdemo.weebly.com/files/theme/pace.js"></script>
  <script>
    function load(time){
      var x = new XMLHttpRequest()
      x.open('GET', "http://localhost:5646/walter/" + time, true);
      x.send();
    };

    load(20);
    load(100);
    load(500);
    load(2000);
    load(3000);

    setTimeout(function(){
      Pace.ignore(function(){
        load(3100);
      });
    }, 4000);

    Pace.on('hide', function(){
      console.log('done');
    });

  </script>
<style>
THE CSS CODE HERE
</style>

Change the text highlighted in green with your own website address. With that code, there is no effect yet. Scroll it down and you still need to insert the CSS code by replacing the text highlighted in red. CSS codes are simply the styles of your progress bar including its color. To get it, please continue to step 4.

4. Go to http://github.hubspot.com/pace/docs/welcome/. When you're in there, scroll down and the first thing you need to do is to choose your progress bar color by clicking the "choose a color" button.

5. Next is your style. There are actually 14 styles to choose from. To select your choice, click on the "download" link above the style and you will be redirected to the CSS code of that particular style. Copy the whole code and replace the red highlighted text on step 3 code.

6. Publish your Weebly site and check out your new progress bar. You can test more styles if you want.

All credits goes to the script author found at the demo page. If you like this tutorial, subscribe via email for more updates.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top