How to Add Progress Loading Bar in Blogger Website.

Hey guys! Hope you are doing well. This topic actually not very important, but if your goal is to make the site look better and look beautiful, it's okay to use these tips. So let's know How to Add Progress Loading Scrollbar on Blogger.

How to Add Progress Scrollbar on Blogger Site

What is a Progress Loading Bar?

As is the case with the progress bar when we copy and paste files on a computer or smartphone, during the copy-paste process it will usually display a progress bar of time it takes to copy the file from the copied folder to another folder. Similar to the Progress Scrollbar on Blogger, Which will Display a horizontal line on the blog page, When we scroll the page it will display a horizontal line and the length of the line will extend to where the page is scrolled.

How to Add Progress Loading Bar in Blogger Website.?

For those, of you who are interested in adding it, So you can follow these tips below.

• Open Blogger dashboard
• Click Theme Menu
• Click on Edit HTML
• Click in the Box and Search </body>
• Add this code before </body>

<script type='text/javascript'>
//<![CDATA[
// Progress Scrollbar
$(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("progress")){(r=$("progress")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".progress-bar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
//]]>
</script>

<progress value='0' max='1'>
   <div class='progress-container'>
      <span class='progress-bar'></span>    
   </div>
</progress> 

<style type='text/css'>
/* Progress Scrollbar */
progress{position:fixed;left:0;top:0;width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#f39c12;z-index:1000}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background-color:#ff0065;z-index:10}
progress::-moz-progress-bar{background-color:#ff0065;z-index:10}
.progress-container{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
.progress-bar{background-color:#ff0065;width:0%;display:block;height:inherit;z-index:10}
</style>