---
title: "How to Add a Progress Cursor in WordPress?"
url: https://nexterwp.com/docs/add-a-progress-cursor-in-wordpress/
date: 2024-12-16
modified: 2026-09-15
lang: en
author: "Aditya Sharma"
description: "A reader part-way down a long article has no idea whether two paragraphs remain or twenty. The Progress circle style draws a ring around the pointer that fills as they..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Progress-Cursor-in-WordPress_-1024x519.jpg
word_count: 422
---

# How to Add a Progress Cursor in WordPress?

## Key Takeaways

- Nexter Blocks Pro incluye el bloque Mouse Cursor, y el ajuste Progress solo funciona cuando Cursor Area está en Body.
- El estilo Progress dibuja un anillo SVG que se llena al desplazarse, y en una página de 5935 píxeles de scroll marca 0%, 25%, 50%, 75% y 100% en cada cuarto del recorrido.
- First Circle Size define el contorno exterior y Second Circle Size el anillo que se llena, por lo que el segundo debe ser más pequeño; Row, Column y Block no renderizan ningún anillo.

A reader part-way down a long article has no idea whether two paragraphs remain or twenty.

The Progress circle style draws a ring around the pointer that fills as they scroll, so the answer follows their eye instead of sitting at the edge of the screen.

*For every Mouse Cursor setting in one place, see the [Mouse Cursor block guide](https://nexterwp.com/docs/add-a-custom-cursor-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-custom-cursors/)

## Before You Start

- **Edition:** **Pro** — the Mouse Cursor block is part of Nexter Blocks Pro.- **Block to enable:** Mouse Cursor, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A page long enough to scroll.** On a short page the ring has nothing to measure.

## Steps

- Add the **Mouse Cursor** block and click **Design from Scratch**.

- Set **Cursor Area** to **Body**.

![The Cursor Area dropdown with Body, Row, Column and Block](https://nexterwp.com/wp-content/uploads/2026/09/mcursor-area.webp)

- Set **Type** to **Follow Circle**, with **Circle Cursor Type** on **Predefined**.

- Set **Circle Style** to **Progress**.

![Circle Style set to Progress, with First and Second Circle Size](https://nexterwp.com/wp-content/uploads/2026/09/mcursor-progress.webp)

- Set **First Circle Size** for the outer track and **Second Circle Size** for the ring that fills.

- Colour the track and the progress ring in the **Follow Circle** panel on the Style tab.

- Publish and scroll the page.

> ***Progress only works with Cursor Area set to Body.** With Row or Block the ring is not rendered at all — measured on the front end, where both produced a plain circle and no ring.*

## How It Behaves

- **The ring tracks scroll exactly.** Measured on a page with 5935 pixels of scroll, the ring's fill read 0%, 25%, 50%, 75% and 100% at each quarter of the way down — perfectly linear.- **First Circle Size** is the outer track and **Second Circle Size** the ring that fills, so the second should be the smaller of the two.- It is drawn as an SVG ring, so it stays sharp at any size.- It measures the whole page, not the article, so long footers count toward the total.

## Limitations

- **Pro only.**- **Body only.** Row, Column and Block render no ring.- A page too short to scroll shows a ring that never moves, which looks broken.- The ring measures the document, so a very long footer or comments section skews what 100% means.- **Touch screens have no cursor**, so phone and tablet visitors see none of this.

## Troubleshooting

### The ring never fills

Either the page is too short to scroll, or **Cursor Area** is not **Body**.

### There is a circle but no ring

**Cursor Area** is set to Row, Column or Block. The ring is only rendered for Body.

### The two circles overlap oddly

**Second Circle Size** should be smaller than **First Circle Size**.

## Related Docs

- [Follow circle cursor](https://nexterwp.com/docs/add-a-follow-circle-cursor-in-wordpress/)- [Blend cursor](https://nexterwp.com/docs/add-a-blend-cursor-in-wordpress/)- [Mouse Cursor block: all settings](https://nexterwp.com/docs/add-a-custom-cursor-in-wordpress/)