Reading Progress Bar For Blogger - Displays for Only Post Content

 

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'>
    <script>/*<![CDATA[*/ 
/* 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",
          a)
    };
  window.addEventListener("scroll", a)
};
/* Custom settings for progress bar */
! function()
{
  const a = document.querySelector(".post-progress");
  a && readingProgress(".post-body", ".post-progress")
}();
/*]]>*/</script> 
  </b:if>

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,
.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