How to Make Reading Progress Bar on Blog

Reading progress bar is an indicator like a colored line to find out how far your site visitors read an article on your blog or website.

This reading progress bar widget has various types, some of which are at the top of the blog which function horizontally when you scroll on a page, the progress bar will point from left to right.

There are two types of options that I offer you, namely a progress bar with a flat color and also a progress bar with a gradient color. You can choose according to your individual taste.

Okay, just for those of you who are interested in installing a reading progress bar on the blog, please follow the steps below:

How to Make Reading Progress Bar on Blog

Log in to Blogger.

Then open the Theme menu > Edit HTML.

Then add this CSS code above the code </head>

Flat Version

<style type='text/css'>
/* Reading Progress Bar (Flat) */
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:#6d1bef;z-index:1000}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background-color:#6d1bef;z-index:10}
progress::-moz-progress-bar{background-color:#6d1bef;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:#6d1bef;width:0%;display:block;height:inherit;z-index:10}
</style>

Note:
height:3px; to set the height of the horizontal line.
#6d1bef; is the main color (flat), please replace it with another color code.

Gradient Version

<style type='text/css'>
/* Reading Progress Bar (Gradient) */
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:linear-gradient(45deg, #5E64EE, #5EEE66);z-index:1000}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background:linear-gradient(45deg, #5E64EE, #5EEE66);z-index:10}
progress::-moz-progress-bar{background:linear-gradient(45deg, #5E64EE, #5EEE66);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:linear-gradient(45deg, #5E64EE, #5EEE66);width:0%;display:block;height:inherit;z-index:10}
</style>

Note:
height:3px; to set the height of the horizontal line.
#5E64EE and #5EEE66; is a gradient color, please replace it with another color code.

Also Read:  How to Make Disqus Lazy Loading Scroll on Blogger

Then add this HTML code below the code <body>

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

Then add this JavaScript code above the code </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>

Finally, please click Save theme.

Note:
If the reading progress bar or horizontal line does not appear, please add this jQuery code above the </body> code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

In addition to beautifying the appearance of your blog, of course the reading progress bar is also very useful for your site visitors to know how long or in a page on your site.

One comment

Leave a Reply