How to add Loading Bar in Blogger | How to add Progress bar in Blogger

TIAL WIZARDS

16 May, 2022

A+ A-

Hi to all, In this article I am going to tell you all about how to add loading bar in blogger website, easily in just 2 minutes.

Read the below provided steps carefully and completely, if you miss any one step then you will definitely get issue while saving the code.

How to add Loading Bar in Blogger | How to add Progress bar in Blogger

Steps to add Progress Bar in Blogger website

Step-1: First of all you need to login to your blogger website dashboard by using your login credentials.

Step-2: Now select your blog -> Theme section -> Customize -> backup theme.

Step-3: click on Customize -> Edit HTML -> Proceed to theme code.

Step-4: Here press CTRL + F and search for </head> or closing head tag and copy below code and paste above the </head> tag.


<!--[ Paste the below code above </head>  ]-->

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

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


<script>
$( 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() {
}
});
});
</script>

Step-5: Now again press CTRL + F and search <body> tag and copy the below code and paste it after <body> tag.


<!--[ Paste the below code after <body> ]-->

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

Step-6: Click on save button.

Now you have successfully added loading or progress bar in your blogger website, you can visit your blog and check whether it is showing or not.

Note:

If it is not showing then you have done mistake while pasting the codes, so backup your code again and do the complete steps again.

If you want to change the color of loading bar then you can change it from the CSS code paste above </head> tag, you can search and copy color codes from google.

Conclusion

If you follow the above provided steps then, you can add loading or progress bar in your blogger website easily in just 2 minutes.

How to add Loading Bar in Blogger | How to add Progress bar in Blogger

Steps to add Progress Bar in Blogger website

Conclusion

Subscribe

Oops! No Internet!

Cookies Consent

Steps to add Progress Bar in Blogger website

Conclusion

Subscribe

Follow by Email

Oops! No Internet!

Cookies Consent

Disclaimer

Disclaimer