How to Add Progress Loading Bar in Blogger Website.

How to Add Progress Loading Bar in Blogger Website.

 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 Loading Bar in Blogger Website.



How to Add Progress Scrollbar on Blogger Site
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>

Next, add this code below the code <body>


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

Next add this code before </head>


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

Edit on the marked section to change the color, position, and height of the Progress Scrollbar.

Click the Save Theme button and you're done! To see the results can be checked on your blog.



Conclusion:

Now you have learned How to Add Progress Loading bar in Blogger. If you have any doubt regarding Blogger, you can ask me in the comment section or Join our Telegram Channel.

Comments