---
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 includes a Mouse Cursor block that adds a progress cursor to WordPress websites.
- Users can customize the circle cursor's size and position using the First Circle Size and Second Circle Size sections.
- The progress cursor visually indicates scrolling distance, enhancing user engagement and navigation.

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.

## Frequently Asked Questions

**Q: What should I do if the progress cursor isn't showing up on my page?**
A: If the progress cursor isn't appearing, check the z-index settings in the Circle Z-Index section. If the cursor circle is set too low, it may be hidden behind other elements on the page. Adjusting the z-index higher can resolve this issue. Additionally, ensure that the Mouse Cursor block from Nexter Blocks is properly installed and activated.

**Q: Does the progress cursor work with mobile devices?**
A: The progress cursor is designed primarily for desktop use. While it may function on mobile devices, the user experience could differ due to touch interactions. It's best to test the cursor on various devices to ensure it meets your design expectations.

**Q: What is the best practice for setting the Circle Size for the progress cursor?**
A: A good practice is to start with a moderate size for both the outer and inner circles, then adjust based on user feedback. The First Circle Size controls the outer circle, while the Second Circle Size manages the inner circle. Ensuring the cursor is not too large helps maintain a clean design.