😍 Loving this theme? Download

Please enter at least 3 characters.

Reading Progress Bar For Blogger - Displays for Only Post Content

Add a smooth reading progress bar for blogger that hides by default, and displays on scroll. When post body content is over, it disappears. Cool, hah?
Reading Progress Bar For Blogger - Displays for Only Post Content


Perfect Reading Progress Bar For Blogger
Last week, we shared how you can show estimated reading time on blogger homepage and posts. Today, we will share a reading progress bar plugin for blogger that displays on top and opens up only for post body content and closes when content is over. 

Why you need a reading bar? The answer is simple - It adds relevance/timeliness of an article (just as we list author/date of publication) and strives to display a transparent experience to potential readers. 

Let's get started:

Add a Reading Progress Bar in Blogger

Lets start by taking a backup of your content.

Adding Javascript for Reading Bar Widget

Search for /body and paste the following code above it.

<b:if cond='data:view.isPost'>
/* Reading Progress bar by TwistBlogg.com */
const readingProgress = (e, t) =>
  const o = document.querySelector(e),
    n = document.querySelector(t),
    a = () =>
      const e = o.getBoundingClientRect(),
        t = window.innerHeight / 2;
      Math.round(n.max - n.value);
      e.top > t && (n.value = 0), e.top < t && (n.value = n.max), e
        .top <= t && e.bottom >= t && (n.value = n.max * Math.abs(e
          .top - t) / e.height), window.addEventListener("scroll",
  window.addEventListener("scroll", a)
/* Custom settings for progress bar */
! function()
  const a = document.querySelector(".post-progress");
  a && readingProgress(".post-body", ".post-progress")

Calling Reading Progress Bar for Blogger

Now, look for position to set reading progress widget. Search where post body starts and paste following code above it.

<b:if cond='data:view.isPost'><progress class='post-progress'/></b:if> 

Styling our Progress Bar Plugin

Last step is styling our progress bar. Add following CSS code to your stylesheet. Change background colors to match your theme. 

/* Post Progress Bar by TwistBlogg.com */
progress {
  vertical-align: baseline;
.post-progress {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 8px;
  transition: opacity 0.15s ease-out 0.3s;
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
.post-progress:not([value]) {
  display: none;
.post-progress[value]::-webkit-progress-bar {
  background-color: transparent;
.post-progress[value]::-webkit-progress-value {
  background-color: #d14984;
.post-progress[value]::-moz-progress-bar {
  background-color: #d14984;
.post-progress[value="1"] {
  opacity: 0;

Understanding the Widget

We select .post-body contents to increase/decrease the value of progress bar. The value is set based on scroll event and varies from 0 to 1. Value is 1 when post body content is over. 

Since our progress bar carries a value on scroll, we use that value to show/hide our bar. By default, value=0 we set progress bar to display:none and for value not equal to zero or one, we set some styling and if value=1, we set opacity=0.

That is all. Simple, right? You have a functioning reading progress bar for blogger that only shows up for post body content and hides when content is finished. Feel free to share and leave a comment. Happy Blogging ✊💪

What to read next? Here's a handpicked article for you 😀

Create an automatic Table of Content (TOC) in Blogger Blog

Share this post

Explore more articles by Aman Bhattarai


Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. Thank you for providing such amazing free featues for blogger users ⚡.
    1. You are welcome Muhammad brother :) Do not forget to share 🚀
Post a Comment