---
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-04-14
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)