Skip to content

How to Show Percentage in Reading Progress Bar in WordPress?

Updated On : September 16, 2026By : Reading Time : 2 minutes

Key Takeaways

  • Progress Tracker en Nexter Blocks muestra un porcentaje en vivo que se actualiza al desplazarse y aparece redondeado al número entero más cercano, sin decimales.
  • Progress Tracker funciona con los tres tipos de barra, Horizontal, Vertical y Circular, y el porcentaje siempre sigue el mismo cálculo que la barra para no desincronizarse.
  • Progress Tracker se activa en Nexter > Blocks dentro del panel de WordPress, y la opción Percentage Style controla si el número aparece dentro o junto a la barra.
Table of Contents

A bar tells you roughly how far. A number tells you exactly.

Percentage adds a live, rounded number that updates as the visitor scrolls — a small addition that works the same way on every type of bar.

For every Dynamic Device setting in one place, see the Progress Tracker block guide.

LIVE BLOCK LINK

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.

Steps

  1. Add the Progress Tracker block anywhere on the page.
  1. Choose a Type: Horizontal, Vertical or Circular.
The Type options
  1. Turn on Percentage.
The Percentage setting
  1. Pick a Percentage Style for where the number sits relative to the bar.

Measured live: scrolled to 40% down the page, the percentage text read exactly 40%, rounded to the nearest whole number.

How It Behaves

  • Works on all three types — Horizontal, Vertical and Circular all measured showing a matching, live-updating number.
  • The number is always rounded to the nearest whole percent, never a decimal.
  • It updates on every scroll event, alongside the bar itself, so the two never fall out of sync.
  • Percentage Style controls placement (for example, inside or beside the bar) — try each option to see which fits your layout.

Limitations

  • No custom text or units — it is always a plain rounded percentage.
  • On a section-scoped bar, the percentage reflects that section’s own scroll trap — see the section guide if the number seems to jump unexpectedly.
  • Small text against a busy background can be hard to read — check contrast, especially inside a thin bar.

Troubleshooting

The number is not showing

Check Percentage is switched on, and that a Percentage Style is selected.

The number jumps straight to 100% early on

If Apply to is set to a section, that section is probably shorter than the screen — see the section guide.

The number and the bar disagree

They should not — both read from the same scroll calculation. Clear any caching plugin and reload; if the mismatch persists, note the exact numbers for a bug report.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

Why is the reading progress percentage not showing in WordPress?

The percentage only appears when Turn on Percentage is enabled and a Percentage Style is selected. Nexter Blocks, part of Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Extension, Nexter Suite, POSIMYTH Nexter, adds that live number on top of the Progress Tracker block. If the bar is visible but the number is missing, the usual cause is that one of those two settings was skipped. The practical fix is to confirm both are set before testing the page again.

Does the percentage work with horizontal, vertical, and circular reading progress bars?

The percentage works on all three types: Horizontal, Vertical, and Circular. That matters because the number is not tied to one layout style, it updates from the same scroll calculation as the bar itself. In Nexter Blocks, this means you can keep one reading indicator behavior across different designs without changing how visitors read it. The number stays live and rounded to a whole percent no matter which type you choose.

Can I show a plain percentage without extra text or units?

The output is always a plain rounded percentage with no custom text or units. That keeps the reading indicator clean and predictable, especially when it sits inside a thin bar or beside a circular tracker. In practice, this is useful when you want a simple progress cue rather than a label-heavy widget. The number updates live as the visitor scrolls and stays rounded to the nearest whole percent.

Why does the reading progress bar jump to 100% too early on a section?

That usually happens when Apply to is set to a section and that section is shorter than the screen. In that case, the section-scoped scroll trap finishes quickly, so the percentage reaches 100% before the visitor expects it. The page points to the section guide for this edge case. The key detail is that section-scoped bars measure only that section, not the whole page.

What should I use for best readability in a reading progress bar percentage?

Percentage Style controls where the number sits relative to the bar, so readability depends on placement and contrast. Small text against a busy background can be hard to read, especially inside a thin bar. In practice, it helps to try each placement option and pick the one that stays clear in your layout. That matters more for compact designs where the number has less visual space.

Why do the number and bar disagree in a reading progress indicator?

They should not disagree because both read from the same scroll calculation and update on every scroll event. If they still look out of sync, caching is the first thing to clear because stale assets can make an old state appear on reload. The page also says to note the exact numbers if the mismatch persists for a bug report. That makes it easier to isolate whether you are seeing cached output or a real calculation issue.

Last reviewed: September 16, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53