How to Make Your Blog More Interactive With A Reading Progress Bar

I always aim to help you improve your blogs engagement and one easy way to do that is by adding A Reading Progress Bar. You have probably seen it before a small bar that moves across the top of the screen as you scroll down a webpage.

Table of Contents

A reading progress bar helps your readers see how far they have gone in an article and how much is left. Adding this feature is a simple way to keep visitors engaged and improve their experience on your blog.

How Does It Work?

When someone starts reading your blog post the progress bar begins at 0%. As they scroll down the bar slowly fills up. when they reach the end it shows 100% complete.

Why blog need a reading progress bar?

A reading progress bar helps readers see exactly how far they have gone in your article and how much is left. This simple visual guide motivates them to continue reading even if the post is long.

It also gives readers a small sense of achievement as the bar fills up. Keeping them aware of their progress without relying on the scroll bar. By making the reading experience smoother and more engaging. A progress bar encourages visitors to stay longer on your site which can boost your blog overall performance.

Guide To setup code

• Step 1: Go to Theme Settings
  On the left-hand sidebar, click on Theme.


• Step 2: Edit HTML
  Under your active theme, click the dropdown arrow and select Edit HTML.


• Step 3: Find the Closing </body> Tag
  Scroll down in the HTML code and find the closing </body> tag in mobile device or press Ctrl + F and enter /body in the search bar to find the closing </body> tag in computer device.


• Step 4: Add the progress bar code
  Insert the given code just above the closing </body> tag in your HTML file.


• Step 5: After adding the code, click Save to apply the changes to your theme.

CSS and Script Code

    <style>
#site-navigation{margin-top:10px!important;}
.reading-meter {position: fixed;top: 0!important;z-index: 1111;width: 100%;background-color: #f1f1f1;}
.BgIstr {width: 100%;height: 7px; z-index: 1111;background: #ccc;}
.progress-bar {height: 7px;background-color:tomato;width: 0%;}
</style>
<div class='reading-meter'><div class='BgIstr'><div class='progress-bar' id='myBar'/></div></div>

<script>
window.onscroll = function() {myFunction()};
function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
    

Additional Customize

You can easily customize your reading progress bar by changing its color and height.

For example: you can modify the background color from tomato to red, Green, violet ect... and adjust the progress bar height from 7px to 5px, 3px or any size you prefer.

If you want a specific color, you can choose any by using its hex code, which you can find on websites like HTMLColorCodes. Just replace the color and height in the code to match your preferences.

Important Notice

Before adding the above code just above the </body> tag, use the following code first and insert the previously given code into it:

HTML Code

    <b:if cond='data:view.isPost'> <--Insert above given code here--> </b:if>
    

Conclusion

By following these simple steps, your blog will display a reading progress bar at the top of each post. This simple addition will help improve user engagement and keep visitors on your site longer.

If you found this article helpful, feel free to share it with your blogger friends and leave your feedback in the comments. Do not forget to join our telegram channel for more updates.