---
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-09-16
lang: en
author: "Aditya Sharma"
description: "A long article without a progress bar asks visitors to trust that the end is coming. Progress Tracker fills, rises or draws a ring as a visitor scrolls, and it..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Reading-Progress-Bar-in-WordPress_-1024x519.jpg
word_count: 585
---

# How to Add a Reading Progress Bar in WordPress?

## Key Takeaways

- Progress Tracker se fija a la pantalla y puede seguir toda la página o una sola sección, con tipos Horizontal, Vertical y Circular.
- Nexter Blocks permite activar Progress Tracker bajo Nexter > Blocks en el panel de WordPress, y la edición indica que funciona en Nexter Blocks gratis y Nexter Blocks Pro.
- Pin Point añade marcadores clicables con nombre solo cuando Apply To está en Entire Page y el tipo es Horizontal o Vertical; no aparece con una sección ni con Circular.

A long article without a progress bar asks visitors to trust that the end is coming.

Progress Tracker fills, rises or draws a ring as a visitor scrolls, and it can track the whole page or just one section.

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

## Before You Start

- **Edition:** Free — the Progress Tracker block works in Nexter Blocks (free) and Nexter Blocks Pro.- **Block to enable:** Progress Tracker, switched on under **Nexter > Blocks** in your WordPress dashboard.- **The bar is fixed to the screen, not the page.** It stays in place as you scroll, pinned to the edge you choose — that is what makes it a reading indicator rather than a static graphic.

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

## Steps

- Add the **Progress Tracker** block anywhere on the page.

- Choose a **Type**: Horizontal, Vertical or Circular.

![The Type options](https://nexterwp.com/wp-content/uploads/2026/09/pt-type.webp)

- Set **Position** for where the bar sits on screen.

- Leave **Apply to** on Entire Page, or point it at one section.

![The Apply to setting](https://nexterwp.com/wp-content/uploads/2026/09/pt-applyto.webp)

- Turn on **Percentage** if you want a number as well as the bar.

![The Percentage setting](https://nexterwp.com/wp-content/uploads/2026/09/pt-percentage.webp)

> ***The bar is fixed to the screen, not the page.** It stays in place as you scroll, pinned to the edge you choose — that is what makes it a reading indicator rather than a static graphic.*

## The Three Types

| Type | Fills by | Guide |
| ---- | -------- | ----- |
| Horizontal | Width, along the top or bottom edge | — |
| Vertical | Height, along the left or right edge | [Vertical progress bar](https://nexterwp.com/docs/add-a-vertical-reading-progress-bar-in-wordpress/) |
| Circular | A ring drawn clockwise | [Circular progress bar](https://nexterwp.com/docs/add-a-circular-reading-progress-bar-in-wordpress/) |

## How It Behaves

- **Every type is proportional to real scroll** — measured at 50% scrolled, every type read 50% filled.- **Apply to can scope the bar to one section** instead of the whole page — useful for a long single post inside a page with other content. **The tracked section needs to be taller than the screen.** Measured: point the block at a section shorter than the viewport and the bar sits at 0% for most of the page, then jumps straight to 100% far too early and stays there — it never tracks the short section smoothly. Pick a section long enough to scroll through in its own right. See the [section guide](https://nexterwp.com/docs/add-a-progress-bar-to-a-section-in-wordpress/).- **Pin Point adds clickable, named markers** along the bar that jump a visitor to that part of the page. **Pin Point only appears with Apply To set to Entire Page, and only on the Horizontal or Vertical types.** Measured: the same setup with Apply To set to a section, or the type set to Circular, renders zero markers — the settings stay in the editor but nothing appears on the page. See the [Pin Point guide](https://nexterwp.com/docs/add-steps-in-a-wordpress-reading-progress-bar/).- Percentage works on all three types, showing a live, rounded number next to the bar.

## Limitations

- **A section-scoped bar needs a section taller than the screen** — measured, see the [section guide](https://nexterwp.com/docs/add-a-progress-bar-to-a-section-in-wordpress/).- **Pin Point does not work with a section-scoped bar or with the Circular type** — measured, no markers render either way.- The bar is fixed to the screen and stacks with any other fixed elements — check it does not overlap a sticky header.

## Troubleshooting

### The bar never seems to move

Check the page is actually taller than the screen, and that **Apply to** is not pointed at a section shorter than the viewport — see the [section guide](https://nexterwp.com/docs/add-a-progress-bar-to-a-section-in-wordpress/).

### My Pin Point markers are not showing

Pin Point only renders with **Apply to** set to Entire Page and the type set to Horizontal or Vertical — measured, it does nothing on a section-scoped or Circular bar.

### The block is missing from the inserter

Switch **Progress Tracker** on under **Nexter > Blocks**.

![Progress Tracker switched on in the Nexter Blocks list](https://nexterwp.com/wp-content/uploads/2026/09/pt-admin-enable.webp)

## Related Docs

- [Vertical progress bar](https://nexterwp.com/docs/add-a-vertical-reading-progress-bar-in-wordpress/)- [Circular progress bar](https://nexterwp.com/docs/add-a-circular-reading-progress-bar-in-wordpress/)- [Track one section](https://nexterwp.com/docs/add-a-progress-bar-to-a-section-in-wordpress/)- [Show a percentage](https://nexterwp.com/docs/show-percentage-in-reading-progress-bar-in-wordpress/)- [Add clickable steps](https://nexterwp.com/docs/add-steps-in-a-wordpress-reading-progress-bar/)

## Frequently Asked Questions

**Q: Why does the reading progress bar stay fixed while I scroll the page?**
A: The Progress Tracker is designed to stay fixed to the screen, not the page. That is what makes it a reading indicator instead of a static graphic. In Nexter Blocks, it can sit on the edge you choose while the visitor scrolls, and the fill, rise, or ring changes based on real scroll progress. That fixed behavior is normal, so it should not move with the content itself.

**Q: How do I add a reading progress bar to a WordPress page?**
A: Nexter Blocks provides a Progress Tracker block that you can place anywhere on the page. From there, choose Horizontal, Vertical, or Circular, set its screen position, and decide whether it tracks the Entire Page or one section. If you want a number as well as the bar, turn on Percentage. The block works in Nexter Blocks free and Nexter Blocks Pro.

**Q: What is the difference between horizontal, vertical, and circular reading progress bars?**
A: Horizontal fills by width along the top or bottom edge, Vertical fills by height along the left or right edge, and Circular draws a ring clockwise. All three are proportional to real scroll, so 50% scrolled means 50% filled. The choice is mostly visual and layout-driven: horizontal feels like a top-of-page indicator, vertical suits side rails, and circular works when you want a compact ring.

**Q: Can I track just one section instead of the whole page?**
A: The Progress Tracker can scope itself to one section with Apply to set to a section instead of Entire Page. That works best for a long single post inside a page with other content. The tracked section has to be taller than the screen, though. If it is shorter than the viewport, the bar will sit at 0% for most of the page and jump to 100% too early.

**Q: Why are my Pin Point markers not showing on the progress bar?**
A: Pin Point only appears when Apply To is set to Entire Page and the type is Horizontal or Vertical. It does not render on a section-scoped bar or on Circular. The settings can still exist in the editor even when nothing appears on the page, so this usually comes down to an incompatible combination rather than a broken block.

**Q: What should I check if the reading progress bar never moves?**
A: The first thing to check is whether the page is actually taller than the screen. A second common issue is pointing Apply to at a section that is shorter than the viewport. In that case, Nexter Blocks cannot measure scroll smoothly and the bar will behave like it is stuck or jump too early. A long enough page or section fixes that behavior.