Follow us to get updates regarding Latest posts Follow Now!

How to Add Gradient Reading Progress Bar in Blogger ?

In this post I have made a Step-by-step tutorial on How to Add Gradient Reading Progress Bar in Blogger.

In this post I made a step by tutorial on How to add Gradient progress bar any Blogger Template, which you can use in any blogger template

Hello Guys ! Welcome back to Techy DarshaN, Toady our tutorial is How to Add Gradient Reading Progress Bar in Blogger ? You may have observed that many websites are having some type of animated indicator feature sticked at the top of the post to give their readers an indication of how far  they have read a blog post or page article. So in this post I am sharing a tutorial about Adding Gradient Progress Bar to Your Blogger site. And I am providing a Advanced Progress Bar with Gradient Effect. 

Pros

  1. New Colourful Gradient Look
  2. Indicate the users about their reading progress
  3. Change your old Progress bar to this gradient style
  4. Attractive Animation
  5. Lightweight script

What is Reading Progress Bar?

You may have see that the most of the website have some kind of an indicator sticked at the top of their site that is Called as Reading progress Bar. Reading Progress bar is a visual representation of how much of the post did the users read and how much of the post remains still. It achieves this by tracking the visitor's reading progress on the page. As they scroll down, the bar begins to fill, indicating how much they have read. Once they've reached the end of the post, the progress bar will be filled. 

Normally, such a Reading Progress Indicators are used on blog posts or long-form articles to help the readers to understand how far they have finished reading post. Some authors or site owners want to add progress bars to their website. But, most authors and site owners are not web designers or developers. So they don’t know how to add this Progress Bar. Well, there is a secret in the HTML development world. The secret is that “Everything is easy once you know how to do it.” Yes, it is actually pretty easy to add a progress bar to your blogger website just follow some simple steps.

Demo

As you can see My site in which you are reading this post I have added a Progress Bar sticked at the top which helps the readers to know how long did they read and how much post remains still.

How to Add Gradient Reading Progress Bar in Blogger ?

Step 1 : Go to your Blogger Dashboard
Step 2 : Go to Themes and then go to Edit HTML
Step 3 : Now Search for  ]]></b:skin> and paste the following CSS just above it.

You can change the Highlighted colour codes according to Theme if necessary

/* Progress Reading Bar by Techy DarshaN*/
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px; background: linear-gradient(to right, #ff3030 ,#ff6f00 ,#ffc400);}
Step 4 : Search for </body> and paste the following Js just to above it 
  <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(&quot;myBar&quot;).style.width = scrolled + &quot;%&quot;;
}
 </script>
Step 5 : Now search for  <body> and paste the following HTML just to above it.
    <div class='progress-container'>
<div class='progress-bar' id='myBar' style='width:0%;'/>
    </div>
If you add the above HTML  the Progress Bar displays on all the site and also your Home page. What if you want to Display this Progress bar only in your posts and not in your Homepage ? Just add the following HTML above   <body> instead of adding the above HTML .

 <b:if cond='data:view.isPost'>  <div class='progress-container'>
<div class='progress-bar' id='myBar' style='width:0%;'/>
    </div> </b:if>
    
Now after adding this HTML codes this progress bar displays only in your posts.

Conclusion

In this post I have made a Step-by-step tutorial on How to Add Gradient Reading Progress Bar in Blogger. Adding this Progress Bar to your website is very useful and essential as it Indicates Reading Progress to the users and it is very also attractive with Gradient colours. I hope you have liked it and please do share with your friends and let them also know about this Progress bar.

If you have any questions please feel free to ask in comments section or You can join our Telegram Group for Discussion .

Getting Info...

About the Author

Student | Developer | Blogger

3 comments

  1. How to add opps,no internet like plus ui theme ?
    1. I will make a tutorial on it
      if possible :)
    2. Thanks you sir
Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.