Team Tiles

A quick and simple way to add progress bars to your website.

Tiles Progress Block

Add a progress bar block to your Gutenberg built website with the Tiles Progress Bar block.

Joeri van Veen

The reading progress bar is a great user experience on longreads. Especially if it accurately depicts the reading progress in the article text, and nothing else. This is standard on single blog posts and enabled by default.
Customization:
<ul>
<li>
Location top of screen, bottom of screen or below a sticky menu.
</li>
<li>
Choose color of the reading progress bar.
</li>
<li>
Have the bar start at 0% even when part of the article is visible.
</li>
<li>
Select post types you wish the bar to appear, or individual posts.
</li>
</ul>
Behaviour:
<ul>
<li>
The reading progress bar has smooth initializing since part of the text may already be visible, after that a lightweight update-function ensures quick response while scrolling.
</li>
<li>
The bar can attach itself to any (sticky) element that you define as an admin, when there are multiple, the first visible element will be used.
</li>
<li>
When there is no (longer a) visible element to attach to, the bar displays at the top.
</li>
<li>
If there is no single article identified (by class names or id) it uses the whole page to calculate progress.
</li>
</ul>
Estimated reading time (beta)
Since 1.6.0 this plugin has rudimentary estimated reading time functionality, for when your theme does not support it out of the box. 
There are some potential issues, some of which cannot be fixed in a plugin. If it does not work for you, switch it off. It will have no effect on the plugin then.
This is my 6th WordPress plugin but my first one freely available to everybody. I hope you enjoy using it as much as I enjoy building it!
Regards, 
Joeri

WP Reading Progress

Light weight fully customizable reading progress bar. Sticks to top, bottom or sticky menu, with fallback for small screens. Includes ert (beta).

Tiles Progress Block vs WP Reading Progress