How to add Stylish Loading Bar like YouTube in Blogger 2020

Adding a stylish Loading bar like YouTube in Blogger is an Advance Customization of your Blog. The loading bar indicates that the content of your blog is loading after the loading bar has gone the content of your Blog is loaded.

In the past YouTube has released there a Big update in that update YouTube has added Progress or Loading bar on top on the front page or any other page on YouTube. The loading bar is a stylish bar or it increases your Blog beauty.

If you looking for a question is How to Add Stylish loading bar like YouTube. You are in the right place. In this article, I will show you how to add a stylish Loading Bar like youtube in Blogger. So let’s Begins.

Follow below Steps to Add Loading Bar Like YouTube in Blogger

First of all log on to your Blogger Dashboard using your Login Id or Password.

add loading bar like YouTube

Then Navigate to Theme » Edit HTML. Edit the HTML of your Blogger Theme. Add some HTML, CSS, JavaScript code in Your Blogger Template.

Add loading bar like youtube in Blogger

Add HTML Code

Copy the following code and paste the code when your <body> tag is started or ended. Then Click on save Theme.

<div id="progress" class="waiting">
<dt></dt>
<dd></dd>
</div>

Add HTML Code

Add CSS Code

Then Copy The Following CSS Code and paste the code before </head> code in <style> paste Here </style> tag. Then click on save theme.

#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
}

Add Stylish Loading Bar Like YouTube

Add JavaScript Code

After the CSS code, you need to Add Some Java Code in your Blogger Template. Let’s Begins.

Copy the following code and paste the code after </style> tag in <script>Paste Here JavaScript Code </script> which has created for CSS Code.

$( document ).ready(function() {
$({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");
}
},
complete: function() {
}
});
});

loading bar like YouTube

Add Google APIS code

All things are done but the one thing is kept is that adding Google Apis code in Your Blog Template. Copy the following code and paste it after the <head> tag in your Theme.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Add Loading Bar like YouTube in Blogger

Conclusion

In this post, we studied How to Add Stylish Loading Bar like YouTube In Blogger. Follow all steps mentioned in the post and stylish your Blog with a loading bar.

If you have got any error or doubt during the process of adding a loading bar. Then post your comment in Comment Box I will reply to you as soon as possible.

Final Words

If you want to change the color of the loading bar, replace the color code #b91f1f with your favorite color in CSS code.

Read Also:

Technoenhance

Rakesh is the Owner and Author of Technoenhance. He is interested in Tech. He provides Tech News, Blogging Tips, Tutorials, WordPress, SEO & Much more.

Leave a Comment