---
title: "How to Add a Progress Cursor in WordPress?"
url: https://qa.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://qa.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

- Integrates a progress cursor using the Mouse Cursor block from Nexter Blocks in WordPress.
- Customizes the cursor by selecting options like Body, Follow Circle, and Progress in the Circle Style section.
- Enables hover effects by adding tags and applying transform CSS in the Style tab for enhanced interactivity.

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://qa.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://qa.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.