.jpg)
Important: Please note that the bar doesn't necessarily signify the *loading* process. It's simply a beautiful animation! It will run at the top of your blog's page once and will give your visitors an illusion that the page is loading!
I've personally added this bar on Techsperia for a week and believe me I've got a hugeamount of positive response from my readers! Infact, this is one of the most awaited tutorial my blog has ever had! So, it's definitely worth a try! :)
Also, I myself am learning some jQuery and am trying to figure out a way for the bar to actually represent the "loading process". If anybody out there is a pro web developer, please feel free comment below and help me and my visitors :)
Demo: If you want to see of how beautiful and graceful this animation really is, have a look at my demo blog!
Let's get started...
Talk is cheap, show me the code!
Go to your blogger dashboard --> Template --> Edit HTML
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.<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'>3. Copy the following CSS code and paste it directly above/before
//<![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>
]]></b:skin>#progress {4. The last step's here! Find
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
}
<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'>5. Hit Save template and you're done!
<dt/>
<dd/>
</div>
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 blue [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 wordpress 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 wondering that adding so much code to your blog for a mere animation is worth it or not!? I can assure you that it is! I've optimized the code nicely! It WON'T reduce your blog's page speed, believe me!
At the time of this tutorial my blog's page speed on Google's pagespeed insights was 88. After adding this progress bar, guess what, the speed was still 88! Hence, we can easily conclude that the bar won't slow your blog down :)
Let me know what you think :)
0 comments:
Post a Comment