A reading progress bar shows you exactly how far you’ve scrolled through an article and how much remains. GutenKit presents a Reading Progress Bar block that helps to remind you your reading progress and stay motivated easily.

Let’s see how the block works.

GutenKit Reading Progress Bar #

From your WordPress dashboard open the page/post where you want to use the reading progress bar.

Now search and simply click/drag and drop the GutenKit Reading Progress Bar block.

Editing content part #

Progress Tracker: To edit the progress tracker utilize the below feature.

• Tracker Type – You can display the bar as a Horizontal or Circular shape.
• Progress Related To – The progress can be related to Entire Page, Post Content, or Selector.
  • Selector- If you choose selector, you have to add CSS id, or Class of the specific element to track its progress separately.
• Direction – You can set the progress direction to Left or Right.
• Show Percentage – If you want to show the reading progress percentage then you can enable the button.
• Percentage Position – Set the percentage position at the Left, Venter, or Right.

Style #

Progress Indicator: If you want to style the progress indicator, you can do it from here.

• Background Color – Change the indicator’s background color according to your preferences.
• Color – Choose any color that suits the indicator.
• Border – Customize the border with a nice color and style from here.
• Border Radius – It allows you to adjust the border radius of the indicator.

Tracker Background: This option lets you customize the tracker’s Background Color, Color, Height, Border, Border Radius, Box Shadow, and Padding.

Content: Here, you can edit the content Color, Typography, Text Shadow, and Margin.

Final outlook #

A customized Reading Progress Bar.