Home

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

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.

TIAL WIZARDS

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

Steps to add Progress Bar in Blogger website

Conclusion

How to add Ads.txt file in Blogger

Download staad pro v8i software

Types of Rain Gauges for Measuring Rainfall | What are Different Types of Rain Gauges

Password Show/Hide Toggle Feature Using HTML, CSS, and JavaScript

How to Apply Voter Id Card online 2026

Subscribe to Our Newsletter

Cookies

Oops! No Internet!

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

Steps to add Progress Bar in Blogger website

Conclusion

How to add Ads.txt file in Blogger

Download staad pro v8i software

Types of Rain Gauges for Measuring Rainfall | What are Different Types of Rain Gauges

Password Show/Hide Toggle Feature Using HTML, CSS, and JavaScript

How to Apply Voter Id Card online 2026

Subscribe to Our Newsletter

Cookies

Bookmarked Posts

Oops! No Internet!