---
title: "How to Add a Reading Progress Bar in WordPress?"
url: https://nexterwp.com/docs/add-a-reading-progress-bar-in-wordpress/
date: 2024-12-12
modified: 2026-08-18
author: "Aditya Sharma"
description: "Adding a reading progress bar to a WordPress website can improve the user experience. This simple yet powerful tool allows readers to track their progress as they scroll through your..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Reading-Progress-Bar-in-WordPress_-1024x519.jpg
word_count: 566
---

# How to Add a Reading Progress Bar in WordPress?

## Key Takeaways

- Nexter Blocks includes a Progress Tracker block that adds reading progress bars in WordPress, with horizontal, vertical, and circular types.
- Progress Tracker applies to the Entire Page or a Selector section, and it can show a percentage in the bar.
- Progress Tracker adds Pin Point steps, and the Style tab controls the progress bar, percentage typography and text color, pin point styling, and offset value for horizontal and vertical types.

Adding a reading progress bar to a WordPress website can improve the user experience. This simple yet powerful tool allows readers to track their progress as they scroll through your content, making it easier for them to gauge how much more content remains to be consumed.

With the Progress Tracker block from the Nexter Blocks, you can easily add different types of reading progress bars in WordPress.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-reading-scroll-progress-bar)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- Make sure the Progress Tracker block is activated, to verify this visit Nexter → Blocks → and Search for Progress Tracker and activate.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=v-NWp6e4-JM

## How to activate the Progress Tracker Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block nameand**turn on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/12/progress-tracker-activate-new.png)

## Key Features

- **3 Types** - You can select from 3 types of reading scroll progress bar, horizontal, vertical and circular.

- **Entire Page** - You can add a reading progress bar to the entire page.

- **Section** - You can [add a reading progress bar to a section](https://nexterwp.com/docs/add-a-progress-bar-to-a-section-in-wordpress/).

- **Percentage** - You can easily [show a percentage in the reading progress bar](https://nexterwp.com/docs/show-percentage-in-reading-progress-bar-in-wordpress/).

- **Pin Points** - You can [add steps in the reading progress bar](https://nexterwp.com/docs/add-steps-in-a-wordpress-reading-progress-bar/).

## How to Use the Progress Tracker Block?

Add the Progress Tracker block from Nexter Blocks to the page.

### Style

From the **Type** section, you can select the reading progress bar type. Here you’ll find three options - 

- **Horizontal** - To add a horizontal reading progress bar.

- **Vertical** - To [add a vertical reading progress bar](https://nexterwp.com/docs/add-a-vertical-reading-progress-bar-in-wordpress/).

- **Circular** - To [add a circular reading progress bar](https://nexterwp.com/docs/add-a-circular-reading-progress-bar-in-wordpress/).

![](https://nexterwp.com/wp-content/uploads/2024/12/progress-tracker-layout.png)

Select the option as per your requirements, you’ll find different options for each type. Let’s select Horizontal here.

From the **Position** section, you can place the progress bar at the top or bottom of the page. 

Then, from the **Direction** section, you can set the progress bar direction to left to right or right to left.

In the **Apply to** section, you can select where to apply the progress bar, you’ll find two options - 

- **Entire Page** - To add a reading progress bar to the entire page.

- **Selector** - To add a reading progress bar to a section.

Let’s select the Entire Page here.

By enabling the **Percentage** toggle, you can [show a percentage in the reading progress bar](https://nexterwp.com/docs/show-percentage-in-reading-progress-bar-in-wordpress/).

### Extra Options

From the **Pin Point** toggle, you can [add steps to the reading progress bar](https://nexterwp.com/docs/add-steps-in-a-wordpress-reading-progress-bar/).

![](https://nexterwp.com/wp-content/uploads/2024/12/progress-tracker-extra-option.png)

![](https://nexterwp.com/wp-content/uploads/2024/12/progress-tracker-horizontal-demo.gif)

## How to Style the Progress Tracker Block?

You’ll find all the styling options under the Style tab to style the Progress Tracker block.

**Progress Bar **- From here, you can style the reading progress bar. You’ll find different options for each type of progress bar.

![](https://nexterwp.com/wp-content/uploads/2024/12/progress-tracker-style.png)

**Percentage** - You’ll see this option only when the Percentage toggle is enabled from the Layout tab. From here, you can manage the percentage typography and text color.

**Pin Point** - You’ll see this option only when the Pin Point toggle is enabled from the Layout tab. From here you can style the pin point.

**Extra Option **- You’ll see this option for the horizontal and vertical progress bar types only. From here, you can add an offset value to the progress bar based on the progress bar type and position.

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/#Plus-Extras-Pro)

## Frequently Asked Questions

**Q: Why isn't the reading progress bar showing up in WordPress?**
A: The usual blocker is setup, not styling. The page says the default WordPress Block editor must be active, the Nexter Blocks plugin has to be installed and activated, and the Progress Tracker block itself must be turned on under Nexter → Blocks. If any of those three pieces are missing, the block will not be available to add. That matters because this feature lives inside Nexter Blocks, not as a standalone WordPress control.

**Q: Can I add a reading progress bar to just one section instead of the whole page?**
A: The Progress Tracker block supports both entire-page and section-based progress bars. In the Apply to setting, Entire Page applies the bar across the full page, while Selector lets you target a section. Nexter Blocks also has a separate tutorial for this use case: [add a reading progress bar to a section](https://nexterwp.com/docs/add-a-progress-bar-to-a-section-in-wordpress/). That makes it useful when you only want progress tracking on long content blocks instead of every scrollable page.

**Q: What types of reading progress bars does Nexter Blocks support?**
A: Nexter Blocks offers 3 types of reading scroll progress bar: horizontal, vertical, and circular. That choice matters because each layout fits a different page design. Horizontal is the common top or bottom bar, vertical works better for side placement, and circular is more visual for compact layouts. The page also notes that different options appear depending on which type you select, so the type you pick changes what styling controls you get later.

**Q: How do I show a percentage in a WordPress reading progress bar?**
A: The Percentage toggle adds a visible percentage inside the reading progress bar. The page also says this setting unlocks its own styling controls under the Style tab, where you can manage percentage typography and text color. That is useful when readers need a clearer readout than just motion on the bar itself. There is also a dedicated guide here: [show a percentage in the reading progress bar](https://nexterwp.com/docs/show-percentage-in-reading-progress-bar-in-wordpress/).

**Q: What are pin points in a reading progress bar?**
A: Pin Points are steps in the reading progress bar. The page says they are enabled from the Pin Point toggle under Extra Options, and they also get their own styling controls once enabled. This is helpful when you want milestone markers instead of one continuous indicator. Nexter Blocks has separate guidance for this pattern too: [add steps in a WordPress reading progress bar](https://nexterwp.com/docs/add-steps-in-a-wordpress-reading-progress-bar/).

**Q: How do I style a horizontal or vertical reading progress bar differently?**
A: Horizontal and vertical bars have an Extra Option setting that lets you add an offset value based on the progress bar type and position. That control only appears for horizontal and vertical types, so circular bars do not use it. The practical reason is placement: offset helps fine-tune where the bar sits relative to your layout instead of forcing it into a fixed position. All styling lives under the Style tab for the Progress Tracker block.