Important: Please note that the bar does not essentially signify the *loading* method. It's merely a pretty animation! it'll run at the highest of your blog's page once and can provide your visitors an illusion that the page is loading!
I've in person additional this bar on Techsperia for per week and believe me I've got a large quantity of positive response from my readers! Infact, this is often one in every of the foremost anticipated tutorial my blog has ever had! therefore, it's positively worth a try! :)
Also, i personally am learning some jQuery and am making an attempt to work out the way for the bar to truly represent the "loading process". If anybody out there's a professional net developer, please be happy comment below and help me and my visitors :)
Demo:
If you wish to check of however beautiful and graceful this animation extremely is, Refresh This Page.
Let's start...
1. First things first. We are using a bit of a jQuery here. Hence, you need to include the jQuery library [hosted on Google] to your blog.
Simply copy the below code and paste it exactly below/after your template's <head> tag.
Note: If you have already added the library before, no need to add it again. Also make sure it's the first thing after the opening <head> tag.
2. Okay, the real stuff begins now. Copy the following jQuery code and paste it directly below/after your template's <head> tag. [Note: It should be *below* the <script> tag in which we have linked the jQuery library!]
Let's start...
Talk is cheap, show me the code!
Go to your blogger dashboard --> Template --> Edit HTML1. First things first. We are using a bit of a jQuery here. Hence, you need to include the jQuery library [hosted on Google] to your blog.
Simply copy the below code and paste it exactly below/after your template's <head> tag.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'></script>
Note: If you have already added the library before, no need to add it again. Also make sure it's the first thing after the opening <head> tag.
2. Okay, the real stuff begins now. Copy the following jQuery code and paste it directly below/after your template's <head> tag. [Note: It should be *below* the <script> tag in which we have linked the jQuery library!]
<script type='text/javascript'>
//<![CDATA[
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$('#progress').css('width', _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},
});
//]]>
</script>
3. Copy the following CSS code and paste it directly above/before ]]></b:skin>
#progress {
position:fixed;
z-index:2147483647;
top:0;
left:-6px;
width:0%;
height:2px;
background:#b91f1f;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
-moz-transition:width 500ms ease-out,opacity 400ms linear;
-ms-transition:width 500ms ease-out,opacity 400ms linear;
-o-transition:width 500ms ease-out,opacity 400ms linear;
-webkit-transition:width 500ms ease-out,opacity 400ms linear;
transition:width 500ms ease-out,opacity 400ms linear
}
#progress.done {
opacity:0
}
#progress dd,#progress dt {
position:absolute;
top:0;
height:2px;
-moz-box-shadow:#b91f1f 1px 0 6px 1px;
-ms-box-shadow:#b91f1f 1px 0 6px 1px;
-webkit-box-shadow:#b91f1f 1px 0 6px 1px;
box-shadow:#b91f1f 1px 0 6px 1px;
-moz-border-radius:100%;
-webkit-border-radius:100%;
border-radius:100%
}
#progress dd {
opacity:1;
width:20px;
right:0;
clip:rect(-6px,22px,14px,10px)
}
#progress dt {
opacity:1;
width:180px;
right:-80px;
clip:rect(-6px,90px,14px,-6px)
}
@-moz-keyframes pulse {
30% {
opacity:1
}
60% {
opacity:0
}
100% {
opacity:1
}
}
@-ms-keyframes pulse {
30% {
opacity:.6
}
60% {
opacity:0
}
100% {
opacity:.6
}
}
@-o-keyframes pulse {
30% {
opacity:1
}
60% {
opacity:0
}
100% {
opacity:1
}
}
@-webkit-keyframes pulse {
30% {
opacity:.6
}
60% {
opacity:0
}
100% {
opacity:.6
}
}
@keyframes pulse {
30% {
opacity:1
}
60% {
opacity:0
}
100% {
opacity:1
}
}
#progress.waiting dd,#progress.waiting dt {
-moz-animation:pulse 2s ease-out 0s infinite;
-ms-animation:pulse 2s ease-out 0s infinite;
-o-animation:pulse 2s ease-out 0s infinite;
-webkit-animation:pulse 2s ease-out 0s infinite;
animation:pulse 2s ease-out 0s infinite
}
4. The last step's here! Find <body and paste the following HTML code directly below/after it. [The <body> tag may have multiple attributes. Make sure you paste the code after the entire opening body tag is finished]
<div class='waiting' id='progress'>
<dt/>
<dd/>
</div>
5. Hit Save template and you're done!
Some pro tips:
- As I told you before, this is nothing but simple animation [the bar moving left to right]. Hence, you can also choose how much time the animation will take. Simply edit the code highlighted in purple [2nd step]. The default value is 4000 which means 4 seconds. You can edit it as per your blog's needs. [Make it close to your blog's loading time so the animation can give the illusion of loading! ]
- To change the color of the bar, edit the code highlighted in pink [3rd step]. The default value is #b91f1f [red]
- The code is nothing but basic HTML, CSS and jQuery. So suppose your blog is on Blogger or you have your own custom website, you can add this bar there as well! You should simply know where your website's <body> and <head> are and you'll be good to go!
The bar won't reduce your blog's page speed!
Okay, you maybe inquisitive that adding such a lot code to your blog for a mere animation is worthwhile or not!? I will assure you that it is! I've optimized the code nicely! It will not cut back your blog's page speed, believe me!At the time of this tutorial my blog's page speed on Google's pagespeed insights was eighty eight. once adding this progress bar, guess what, the speed was still 88! thence, we are able to easily conclude that the bar will not slow your blog down :)
Let me grasp what you're thinking that :)
0 comments:
Post a Comment