Reading Progress Bar

Show readers their progress through your content

Add a beautiful scroll progress indicator to your blog posts. Shows readers how far through the content they are, increasing engagement and reducing bounce rates.

Live Interactive Demo

Watch the progress bar fill as you scroll through content. Hover to pause auto-scroll and try scrolling yourself!

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices ut neque in faucibus. Mauris sollicitudin mattis eros lacinia laoreet. Donec ex eros, pellentesque sed augue id, elementum facilisis ligula. Sed quis pharetra turpis. Quisque convallis fringilla facilisis. Integer porttitor ligula mi, id viverra elit porta id. Sed quis nunc consequat nibh egestas accumsan eu nec orci. Etiam sollicitudin ex non ligula fermentum, nec finibus nisi facilisis. Donec fermentum nulla vel libero vestibulum aliquam. Sed porta lacinia accumsan. Nunc eget ipsum aliquet, malesuada massa sit amet, elementum turpis.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices ut neque in faucibus. Mauris sollicitudin mattis eros lacinia laoreet. Donec ex eros, pellentesque sed augue id, elementum facilisis ligula. Sed quis pharetra turpis. Quisque convallis fringilla facilisis. Integer porttitor ligula mi, id viverra elit porta id. Sed quis nunc consequat nibh egestas accumsan eu nec orci. Etiam sollicitudin ex non ligula fermentum, nec finibus nisi facilisis. Donec fermentum nulla vel libero vestibulum aliquam. Sed porta lacinia accumsan. Nunc eget ipsum aliquet, malesuada massa sit amet, elementum turpis.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices ut neque in faucibus. Mauris sollicitudin mattis eros lacinia laoreet. Donec ex eros, pellentesque sed augue id, elementum facilisis ligula. Sed quis pharetra turpis. Quisque convallis fringilla facilisis. Integer porttitor ligula mi, id viverra elit porta id. Sed quis nunc consequat nibh egestas accumsan eu nec orci. Etiam sollicitudin ex non ligula fermentum, nec finibus nisi facilisis. Donec fermentum nulla vel libero vestibulum aliquam. Sed porta lacinia accumsan. Nunc eget ipsum aliquet, malesuada massa sit amet, elementum turpis.

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices ut neque in faucibus. Mauris sollicitudin mattis eros lacinia laoreet. Donec ex eros, pellentesque sed augue id, elementum facilisis ligula. Sed quis pharetra turpis. Quisque convallis fringilla facilisis. Integer porttitor ligula mi, id viverra elit porta id. Sed quis nunc consequat nibh egestas accumsan eu nec orci. Etiam sollicitudin ex non ligula fermentum, nec finibus nisi facilisis. Donec fermentum nulla vel libero vestibulum aliquam. Sed porta lacinia accumsan. Nunc eget ipsum aliquet, malesuada massa sit amet, elementum turpis.

Section 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices ut neque in faucibus. Mauris sollicitudin mattis eros lacinia laoreet. Donec ex eros, pellentesque sed augue id, elementum facilisis ligula. Sed quis pharetra turpis. Quisque convallis fringilla facilisis. Integer porttitor ligula mi, id viverra elit porta id. Sed quis nunc consequat nibh egestas accumsan eu nec orci. Etiam sollicitudin ex non ligula fermentum, nec finibus nisi facilisis. Donec fermentum nulla vel libero vestibulum aliquam. Sed porta lacinia accumsan. Nunc eget ipsum aliquet, malesuada massa sit amet, elementum turpis.

Section 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices ut neque in faucibus. Mauris sollicitudin mattis eros lacinia laoreet. Donec ex eros, pellentesque sed augue id, elementum facilisis ligula. Sed quis pharetra turpis. Quisque convallis fringilla facilisis. Integer porttitor ligula mi, id viverra elit porta id. Sed quis nunc consequat nibh egestas accumsan eu nec orci. Etiam sollicitudin ex non ligula fermentum, nec finibus nisi facilisis. Donec fermentum nulla vel libero vestibulum aliquam. Sed porta lacinia accumsan. Nunc eget ipsum aliquet, malesuada massa sit amet, elementum turpis.

Section 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices ut neque in faucibus. Mauris sollicitudin mattis eros lacinia laoreet. Donec ex eros, pellentesque sed augue id, elementum facilisis ligula. Sed quis pharetra turpis. Quisque convallis fringilla facilisis. Integer porttitor ligula mi, id viverra elit porta id. Sed quis nunc consequat nibh egestas accumsan eu nec orci. Etiam sollicitudin ex non ligula fermentum, nec finibus nisi facilisis. Donec fermentum nulla vel libero vestibulum aliquam. Sed porta lacinia accumsan. Nunc eget ipsum aliquet, malesuada massa sit amet, elementum turpis.

Section 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices ut neque in faucibus. Mauris sollicitudin mattis eros lacinia laoreet. Donec ex eros, pellentesque sed augue id, elementum facilisis ligula. Sed quis pharetra turpis. Quisque convallis fringilla facilisis. Integer porttitor ligula mi, id viverra elit porta id. Sed quis nunc consequat nibh egestas accumsan eu nec orci. Etiam sollicitudin ex non ligula fermentum, nec finibus nisi facilisis. Donec fermentum nulla vel libero vestibulum aliquam. Sed porta lacinia accumsan. Nunc eget ipsum aliquet, malesuada massa sit amet, elementum turpis.

The progress bar shows how far through the content you've scrolled. Hover over the content area to pause auto-scroll and try it yourself!

Get the Free Snippet

Add a progress bar to your WordPress blog automatically

Choose your specific theme for optimized snippets, or use "General" if unlisted

Your Snippet Code
Copy and paste the code below into your WordPress site

Add this to your single post template

<!-- Progress Bar Container -->
<div class="blogutils-progress-bar-container">
  <div class="blogutils-progress-bar"></div>
</div>

Tired of Copy-Pasting Code?

Get the Progress Bar WordPress plugin for a professional solution

Free Snippet:

  • Free forever
  • Works on any theme
  • Manual code updates
  • No admin UI
  • Basic customization

WordPress Plugin:

  • One-click installation
  • Position control (top/bottom)
  • Height & color customization
  • Smooth 60fps animation
  • Tested on 5 major themes
  • Mobile responsive
$50
one-time payment
View WordPress Plugin →

Why Use Progress Bar?

Increase reader engagement
Reduce bounce rates on long articles
Provide visual reading feedback
Improve content completion rates

Frequently Asked Questions

Where does the progress bar appear?

The progress bar appears as a thin horizontal line at the top or bottom of your page (your choice). It fills from left to right as the reader scrolls.

Can I customize the color?

Yes! The free snippet includes basic CSS for color customization. The WordPress plugin offers a color picker in the admin panel for easy visual customization.

Does it affect page load speed?

No. The progress bar uses highly optimized JavaScript with requestAnimationFrame for smooth 60fps performance with minimal CPU usage.

Does it work on mobile?

Absolutely! The progress bar is fully responsive and works perfectly on mobile devices, tablets, and desktops.