---
title: "How to Add a Progress Cursor in Elementor?"
url: https://theplusaddons.com/docs/add-a-progress-cursor-in-elementor/
date: 2025-01-11
modified: 2026-04-09
author: "Aditya Sharma"
description: "Are you looking to add a progress cursor in Elementor? A progress cursor indicates how far you’ve scrolled on the page, adding an interactive element to the website. With the..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Add-a-Progress-Cursor-in-Elementor_-1024x536.jpg
word_count: 323
---

# How to Add a Progress Cursor in Elementor?

## Key Takeaways

- Mouse Cursor widget from The Plus Addons for Elementor adds a progress cursor to indicate scrolling distance.
- Users can customize the outer and inner circle sizes of the progress cursor using the First Circle Size and Second Circle Size sections.
- The progress cursor can be styled for normal and hover states in the Style tab of The Plus Addons for Elementor.

Are you looking to add a progress cursor in Elementor? A progress cursor indicates how far you’ve scrolled on the page, adding an interactive element to the website.

With the Mouse Cursor widget from The Plus Addons for Elementor, you can easily add a progress cursor in Elementor.

*To check the complete feature overview documentation of The Plus Addons for Elementor Mouse Cursor widget, [click here](https://theplusaddons.com/docs//add-a-custom-cursor-in-elementor/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/mouse-cursor/)

To do this, add the Mouse Cursor widget from The Plus Addons for Elementor to the page and follow the steps -

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

![](https://theplusaddons.com/wp-content/uploads/2025/01/mouse-cursor-progress-cursor.gif)

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

3. From the Pointer Type dropdown, select **Predefined**. 

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

5. After that, select **Progress Cursor (Body) **from the **Follow Circle Style** dropdown.

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 do I need before starting to add a progress cursor in Elementor?**
A: You need to have The Plus Addons for Elementor installed and activated to use the Mouse Cursor widget, which allows you to add a progress cursor in Elementor.

**Q: How do I add a progress cursor using The Plus Addons for Elementor?**
A: To add a progress cursor, add the Mouse Cursor widget from The Plus Addons for Elementor, select 'Body' from the Cursor Area dropdown, and choose 'Progress Cursor (Body)' from the Follow Circle Style dropdown.

**Q: What happens after I complete the steps to add a progress cursor?**
A: After completing the steps, you will see a progress bar inside the circle cursor indicating how far youu2019ve scrolled on the page.

**Q: What if the progress cursor doesn't show over certain elements?**
A: If the cursor doesn't show over any element, you can adjust the z-index of the circle in the Circle Z-Index section of the Mouse Cursor widget settings.

**Q: Can I customize the appearance of the progress cursor?**
A: Yes, you can customize the circle for normal and hover states from the Style tab after adding the progress cursor using The Plus Addons for Elementor.

**Q: Is there an alternative way to add a custom cursor in Elementor?**
A: For a complete feature overview of adding a custom cursor, you can refer to the documentation by [clicking here](https://theplusaddons.com/docs//add-a-custom-cursor-in-elementor/).