How to add Post progress bar in blogger

Hello, friends welcome to Shiva Technic World in this post I am going to give you the post progress bar code for Blogger. So let's check.

Copy this code and paste 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>

Then copy & paste this code below <body>

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

Then copy & paste this code before </head> or </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:#ffee00;z-index:10}
progress::-moz-progress-bar{background-color:#ffee00;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:#ffee00;width:0%;display:block;height:inherit;z-index:10}
</style>

How to add Post progress bar in blogger

Join the conversation