How to create Youtube like Progress bar for blogger?

Hi friends in this post i am sharing how to create youtube like progress bar for blogger.Not only with this ,we have given a lot of more progress bar to blogger.Pace.js is an opensource javascript plugin which helps to make the loading bar (or) progress bar.And we are going to see how to use pace.js in blogger and loading progress bar successfully.

How to host pace.js in google drive and get the streaming link?

First download pacejs file from "https://www.dropbox.com/s/uiu3ua51mu0ncxh/pace.js?dl=0".
Now upload this file to your google drive account.
Change sharing settings to "Public on the web".You wil get link.If you forgot to get the link.Once again click the file and right click on it choose "Share".Now you will get the link .In the link get the file id .
For example.
https://drive.google.com/file/d/0Byde2iOkYelrV1I1VlUwVnlHVXc/view?usp=sharing
Take only 0Byde2iOkYelrV1I1VlUwVnlHVXc (i.e)The id is present in between "d/" and "/view"
Now add the file id like below,
<script src='https://googledrive.com/host/0Byde2iOkYelrV1I1VlUwVnlHVXc' type='text/javascript'/>
That's all friends now you got the streaming link of pace.js

How to Add Pace.js streaming link in blogger?

Now goto blogger template.Then click edit HTML.
Find <head>.Place <script src='https://googledrive.com/host/0Byde2iOkYelrV1I1VlUwVnlHVXc' type='text/javascript'/> just below <head>

How to create you tube like progress bar for blogger?

Now copy the below css code, goto blogger and paste it in just above ]]> </b:skin>

.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: red;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}

If you want to change the color replace “red” with your html color codes.You can change the height 2px ,if you want to enlarge the progress bar.

Create Flash loading bar for blogger

Copy the below css code, goto blogger and paste it in just above ]]> </b:skin> .Keep in mind friends use only one css code loading bar to blogger.If you already running youtube progress bar and now want to use flash loading bar means first remove the css of youtube progress bar then paste the flash loadbar css code

.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: #29d;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}
@-webkit-keyframes pace-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}