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>
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.
0 comments: