---
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-04-14
author: "Aditya Sharma"
description: "Are you looking to add a progress cursor in WordPress? A progress cursor visually shows how far a user has scrolled on the page, adding an interactive and functional element..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Progress-Cursor-in-WordPress_-1024x519.jpg
word_count: 316
---

# How to Add a Progress Cursor in WordPress?

## Key Takeaways

- Nexter Blocks Mouse Cursor block adds a progress cursor to a WordPress website and shows how far a user has scrolled on the page.
- Cursor Area set to Body, Type set to Follow Circle, and Circle Style set to Progress create the progress cursor effect.
- Style tab settings control the outer circle size, inner circle size, Cursor Left Offset, Cursor Top Offset, Circle Z-Index, and hover-state customization.

Are you looking to add a progress cursor in WordPress? A progress cursor visually shows how far a user has scrolled on the page, adding an interactive and functional element that enhances user engagement and navigation.

With the Mouse Cursor block from Nexter Blocks, you can easily add a progress cursor to your WordPress website.

*To check the complete feature overview documentation of the Nexter Blocks Mouse Cursor block,* *[click here](https://nexterwp.com/docs/add-a-custom-cursor-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

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

To do this, add the Mouse Cursor block to the page and follow the steps -

1. Select **Body** from the **Cursor Area** dropdown.

2. Then select **Follow Circle** from the **Type** dropdown.

3. From the Circle Cursor Type section, select **Predefined**. 

4. Then, from the **Select **dropdown, you have to select a cursor icon.

5. After that, select **Progress **from the **Circle Style** section.

From the **First Circle Size** section, you can manage the outer circle size.

Then, from the **Second Circle Size**, you can control the inner circle size.

You can manage the circle’s left and top distance from the mouse cursor from the **Cursor Left Offset** and **Cursor Top Offset** sections.

From the **Circle Z-Index** section, you can maintain the z-index of the circle, if the circle doesn’t show over any element.

Then, in the **List of Tags for Hover Effect** section, you can add tags where you want to show the cursor hover effect.

> *Note: You can add multiple tags separated by a comma (,) and you have to add transform CSS for the hover effect in the Style tab.*

From the **Style** tab, you can further customize the circle for normal and hover states.

Now, when you scroll through the page, you’ll see a progress bar inside the circle cursor indicating how far you’ve scrolled.