How To Boost Reader Engagement By Adding Progress Indicators to Your Blog Posts

“How long is this gonna take to read?!”

That’s the subconscious question every online visitor asks themselves before reading anything you, me, or anyone has ever published.

And can you blame them?

With so many blog posts, books, news feeds, Netflix shows and YouTube channels out there vying for our precious attention, ain’t nobody got time to do it all.

That’s why most online content just gets ignored (including yours).

So other than putting the extra effort in to write catchy titles, make your headings skim friendly & create eye-popping visuals for your posts, are there any easy buttons you can press RIGHT NOW to help break through the noise and get visitors to keep reading right down to your comments section?

Keep scrolling to learn how you can boost your reader engagement by quickly adding Reading Progress Indicators to your blog posts if you happen to use the most powerful theme builder for WordPress...

More...

What Are Reading Progress Indicators?

Reading Progress Indicators take a few different forms and include:

  1. Horizontal Progress Bars

  2. Estimated Reading Timer Indicators

  3. Reading Time Remaining Indicators

To get an idea of exactly how they’re being used on various websites, take a look at the following real-life examples...

Horizontal Progress Bars

These are left-to-right progress bars that appear at the top of pages, visually illustrating how far a reader is within a piece of content as they scroll up or down a page.

Stronger by Science Blog

The Stronger by Science blog uses a thin, blue horizontal progress bar at the very top of its articles:

Stringer by Science blog Horizontal Progress Bar example

The Stronger by Science blog uses a thin, blue, horizontal progress bar displayed at the top of the page to visually indicate where readers are within a given article.

Hubspot Blog

Hubspot’s blog uses a thick, orange horizontal progress bar at the bottom of Sticky Transition Headers for each article:

Hubspot blog Horizontal Progress Bar example

The Hubspot blog uses a thick, orange, horizontal progress bar displayed beneath a Sticky Transition Header to visually indicate where readers are within a given article.

Estimated Reading Time Indicators

These common time estimate indicators (usually in minutes) are typically embedded in the above-the-fold Top Sections of long form blog posts, long form writing platforms (like Medium) and even journalistic news site articles.

Medium

The online writing platform Medium popularized estimated reading times by making it a core feature for all its content. Here’s a look at one such article by media theorist and author Douglas Rushkoff (on his Medium subdomain called OneZero):

Medium article Estimated Time example

The writing platform Medium uses simple estimated reading time text after article titles, next to the author’s name.

Mark Manson’s Blog

Mark Manson uses estimated reading times within the above-the-fold Top Sections of all his posts:

Mark Manson blog Estimated Time example

Mark Manson uses a simple estimated reading time text in the above-the-fold Top Sections of his blog posts.

Reading Time Remaining Indicators

This feature is similar to the estimated reading time indicator, but differs by remaining visible as readers scroll (up or down). That’s because it lives inside a floating element (like a Sticky Sidebar) and constantly auto-updates itself as to what the remaining reading time is (usually in minutes).

Modern Manimal Blog

Because you can now create Auto-Updating Reading Time Remaining indicators with Thrive Theme Builder

...I just added this cool new feature to my own WordPress blog!

Modern Manimal blog Reading Time Remaining example

The Modern Manimal blog uses an auto-updating remaining time indicator within its Sticky Sidebars.

Why Are Progress Indicators So Darn Engaging?

Reading progress indicators are typically displayed on sites that publish long form content.

It’s become one of the best ways to inform readers just how much time they’ll need to complete a given article — finishing it right then and there if it’s short, or setting aside an appropriate amount of time to read it later if it’s too lengthy for the moment.

Defining up front what’s required to consume your content provides potential readers with a finite framework from which to make a necessary time commitment. As Marina Konnikova states in her New Yorker article about why people love listicles (based on supporting evidence): “The more we know about something—including precisely how much time it will consume—the greater the chance we will commit to it.”

So when it comes to boosting engagement on your blog, displaying reading progress indicators is a simple & easy way to encourage online visitors to:

  • Start reading your posts (because they indicate the time required up front).

  • Feel less overwhelmed by your long articles (because it helps people feel oriented within lengthy content).

  • Complete an article once started (because the finish line remains in constant sight).

And given how search engines like Google interpret lower bounce rates & longer session times as positive signals that content is good, Reading Progress Indicators could have a meaningful impact on your site's search engine rankings too!

So now that we've covered the WHY behind reading progress indicators, let’s now discuss HOW you can deploy them on your own site using Thrive Theme Builder...

How To Add Reading Progress Indicators to Your Blog Posts Using Thrive Theme Builder

The easiest way to add Reading Progress Indicators to your WordPress site is by modifying your Post theme templates within Thrive Theme Builder.

By doing so, you can include elements like Estimated Reading Times in your above-the-fold Top Sections, Auto-Updating Reading Time Remaining indicators in your Sticky Sidebars, and Horizontal Progress Bars at the top of your articles.

To add your choice of reading time indicator, each requires the common first step of opening your WordPress dashboard, navigating to the Templates area of your Thrive Theme Builder dashboard, and opening the visual editor for the Default Post template you’re going to modify:

Thrive Theme Builder dashboard

Navigate to the Thrive Theme Builder dashboard’s Templates section and select a Post template to customize.

Once the Thrive Theme Builder visual editor is locked & loaded, use the following instructions to deploy one (or even all!) of the reading progress indicators described below...

Adding Horizontal Progress Bars

Start by highlighting the “Theme Template Name” breadcrumb and opening the Main Options tab in the left sidebar.

From there, simply toggle ON the “Reading progress indicator” option and choose which “Progress indicator location” you want to use (in the dropdown box that appears).

You have 2 options...

Option 1: Top of viewport

Use this horizontal progress bar option with fixed headers (that disappear as you scroll down the page):

"Top of viewport" horizontal progress bar option

The “Top of viewport” horizontal progress bar option.

Option 2: Underneath the header

Use this horizontal progress bar option with your Sticky Headers or even Sticky Transition Headers:

"Underneath the header" horizontal progress bar option

The “Underneath the header” horizontal progress bar option. Note: this option can only be used with Headers using the Sticky scroll behaviour option.

Once you select your progress indicator location, just assign it a color (your Thrive Theme Builder brand color is recommended) and modify its pixel height as you like:

Set your Horizontal Progress Bar color & pixel height

You can also change the color and pixel height of your horizontal progress bar.

"Underneath the Header" Progress Bar Pro Tip

If you choose the “Underneath the header” progress indicator location, then you’ll need to make your header “Sticky”.


You can do this by highlighting your Header breadcrumb, entering the “Editing Header” mode, opening the Scroll Behavior tab in the visual editor’s left sidebar, and setting the “Behavior on Scroll” option to Sticky:


Make your Header design Sticky

When using the “Underneath the header” horizontal progress bar option, make sure to change your Header’s scroll behaviour to Sticky.

And that’s it!

Save your work and you’ll have a Horizontal Progress Bar visually working to inform your readers just how much article they have left to cover when scrolling down your blog posts.

Adding Estimated Reading Time Indicators

To display Estimated Reading Times at the top of your blog posts, you’ll need to drag & drop any design element that uses text into the Top Section of your Default Post template so you can use it to show a particular dynamic text feature.

To do this, first highlight the default text you dropped onto the page and then click on the “stacked pancakes” looking icon in the text editor floating bar. From there, select the “Content” option from the first dropdown box, and then the “Reading time remaining (in minutes)” option in the second dropdown box:

Add "Reading time remaining (in minutes)" dynamic text

To dynamically display an estimated reading time in the above-the-fold Top Section of your blog posts, set a Text element to the following Dynamic Text options: 1) “Content” & 2) “Reading time remaining (in minutes)”.

Once applied, the amount of time needed to read an article (in minutes) will replace the default text PLUS the words “minutes remaining”. Just modify this auto-generated suffix to say whatever you want (like “# Minute Read” instead).

Once you save your work, readers will be able to see exactly how long one of your articles takes to read — as soon as a post loads!

Adding Auto-Updating Reading Time Remaining Indicators

This last Reading Time Indicator feature is an adaptation of the Estimated Reading Time indicator discussed above.

Just like the previous indicator feature, first set your text to dynamically display the “Reading time remaining (in minutes)” option.

However, now you’ll make sure this dynamic text lives in a floating element (like a Sticky Sidebar) instead of a fixed, above-the-fold Top Section:

Reading Time Remaining example in a Sticky Sidebar

To dynamically display an auto-updating reading time remaining indicator throughout your post, add a Text element to a floating element (like a Sticky Sidebar) and set its Dynamic Text options to: 1) “Content” & 2) “Reading time remaining (in minutes)”.

Because the “Reading time remaining (in minutes)” dynamic text feature auto-updates itself as you scroll down the page, it’s perfect for showing readers how much time is left to finish a given article — no matter where they currently are within the text.

To get started deploying this feature, make sure the design element you’re adding the dynamic text to is “Sticky” (so it’ll remain visible as your readers scroll). Sticky Sidebars are great candidates for this job!

If adding this feature to a Sticky Sidebar, just highlight the Sidebar Section breadcrumb in your visual editor window, open its Scroll Behaviour tab in the visual editor’s left sidebar, and toggle ON the “Enable sticky sidebar” option:

Make your Sidebar Sticky

Make sure your Sidebar Section’s scroll behaviour is set to “Sticky”.

Now you’re ready to add a Text element to the Sidebar Section. It’s best to do this in the middle of the Sidebar Section so it remains visible as readers scroll up or down a page:

Add your Remaining Reading Time indicator to the middle of your Sticky Sidebar

Add a Text element to the middle of your Sidebar Section (so it remains visible for readers when scrolling up and down) and apply the same Dynamic text settings: 1) “Content” & 2) “Reading time remaining (in minutes)”. Adjust the prefix and suffix text as needed.

Just add or modify any prefix and/or suffix text you need to complement the “Reading time remaining (in minutes)” dynamic text to suit your Sticky Sidebar. Then save your work.

Now when your readers scroll through your articles, the time remaining will always be visible.

Where Should You Use Reading Progress Indicators?

It’s true that these Reading Progress Indicator features are pretty awesome and super easy to deploy on ANY of your theme templates inside Thrive Theme Builder

...but should you use them across every single post and page of your website?

Definitely not.

Here’s some important suggestions about WHERE and WHERE NOT to use Reading Progress Indicators on your site to maximize their retention boosting potential:

DO Use Reading Progress Indicators on:

  • Short posts that require some scrolling (knowing the time commitment is short will get more readers to stick around) 
  • Long form posts or articles
  • Review posts
  • News articles
  • Stories or book chapters (if you publish / preview / tease your work online… Amazon Kindles do this to boost reading times, so why shouldn’t you?)

DON’T Use Reading Progress Indicators on:

  • Short, daily, bite-sized style, non-scrollable posts
  • Infographic posts or pages
  • Sales pages
  • Product description pages
  • Landing pages
  • Lead generation pages

How Long Does It Take to Read Your Posts?

Would your content benefit from more readers making it to the comments section?

Of course it would, so take a few minutes right now to add (at least) one of the 3 progress indicator features discussed above to your “Default Post” template inside Thrive Theme Builder.

By the way, did you know you can get Thrive Theme Builder PLUS our entire DIY solopreneur toolkit of conversion focused WordPress plugins by becoming a
Thrive Member?

We’re constantly adding awesome new features AND professionally designed templates to all our products to make it easier, faster, and even fun to run a successful online business.

Still have any questions about Reading Progress Indicators or how to customize them to suit your website? Please share them in the comments section below!

Author: Matt Totten

    Matt's a geologist turned online marketer and digital nomad. He's a Modern Manimal on a mission to cultivate a wild lifestyle – by design. When away from his tech, you can find him studying movement through practices like Aikido, AcroYoga and Barefoot Running.

  • Lexi Rodrigo says:

    I love this new feature! I never knew I wanted it until I read your post, so well done, Matt :-D
    I can’t wait to try it on my sites!

    • Matt says:

      Thanks so much Lexi… I love it too! It’s such a quick, easy and good looking feature to add to your posts with Thrive Theme Builder! b(^o^)d << me flexing...

      • jeanne.stribling says:

        Can we please add the ability to like, laugh, and heat comments? Cause your “bod flexing” is cracking me up…

      • Matt says:

        (⌒▽⌒)Japanese emoticons for the win! That would be a cool feature to add to Thrive Comments… I’ll pass it along to the dev team Jeanne… thanks!

      • jeanne.stribling says:

        Heart not heat.
        Autocorrect strikes again and this time with creep factor…

      • Matt says:

        (•゚д゚•)

  • Tsahi Levent-Levi says:

    I found this interesting. I sometimes “envy” those that have these reading time or horizontal progress bar. But then I never do anything about it.

    Your decided on this blog to not use it either. Can you share the reason why?

    • Matt says:

      Thanks Tsahi… sounds like your website is finally going to sport its own reading progress indicators now!

      And as for why this feature isn’t displayed on our own blog posts yet, we’re a company of 50+ people now so sitewide design changes take a bit more time to decide on before we implement them. Our amazing design team is working on some special stuff as we speak though…

  • When do we get this feature for PAGES and not just for POSTS?

    Plus, would really like this on special types of pages / content such as my LearnDash (LMS) Lessons and Topics. Plus, of course the Apprentice chapters / pages.

    • Hanne says:

      Hi Mark,

      Happy to see you’re so eager to use the new feature!

      Pages are around the corner (should be in the next release if all goes well).
      Custom post types will have to wait a bit longer (this is not currently on the roadmap).

      But I’ll note your request for having this on Apprentice related content!

      • John D says:

        Would be very useful to have this on Apprentice content for sure. ????

  • Anna says:

    Very nice features. :-) Thank you.

  • jacobseidman says:

    Nice! Now I want to have the following ability, at x time remaining to display a sticky message “A” on the sidebar and at y time “B” message, and so on. How I do that? Thanks

    • Matt says:

      Thanks Jacob!

      The way I would do this is:

      1) create a Thrive Leads “Slide-In” form (within a Thrive lead group) and then…

      2) use its advanced trigger settings to show your form (be it a simple message or a CTA or lead gen form) with either the “Show when a user scrolls to a specific part of the content” option or the “Show when the user scrolls to a percentage of the way down the content” option.

      Assuming you don’t have any conflicting Thrive Leads lead groups that want to display on the same post, this should give you the functionality you’re looking for.

      • jacobseidman says:

        Thanks, I will give it a try.

  • Umberto says:

    Lovely addition to the TTB feature list. Will add it right now.

    • Matt says:

      Rapid implementation in action… way to go Umberto!

  • Christina H says:

    Drink your own kool-aid — your blog isn’t using these yet ;) It only took me 5 minutes to add this to my site.

    I always find it strange when someone posts something extolling the virtues of doing something and then they don’t do it for themselves. Blogs about the power of using video are the most common offenders – they almost never have a video on them.

    • Hanne says:

      Really wish we could :(

      Unfortunately this website has ton of custom stuff built on it and before any change happens, a whole ton of tests need to be done to avoid breaking our back-end (and make sure you guys have access to your products ;-) )

  • Nagui Bihelek says:

    This is awesome. Do you have any plans to report on how log people are spending on the page, or where they read to before exiting the page?

    • Hanne says:

      Hi Nagui,

      No we have not :) You can get the time on page from your analytics tool.

  • Ana says:

    Hi, this is super useful, thanks.
    However, I’m seeing that for one of my posts the estimated time is 18 minutes, which seems to be quite much for the length of the text. Is there anyway to adjust this?

    • Matt says:

      Hi Ana, if you think the estimated time is incorrect, can you submit the issue with our support team? Otherwise, you can’t currently adjust the estimate. It takes the total words of your post and uses a 200 wpm reading speed to calculate the estimated reading time.

  • Caspar says:

    “No books were harmed in the making of this video.”

    Nice one! :-)

  • >