---
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
lang: en
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?

## 

- Integrates the Mouse Cursor widget from The Plus Addons for Elementor to add a progress cursor.
- Selects Follow Circle and Progress Cursor (Body) in the Cursor Type dropdown for customization.
- Allows further customization of the cursor's appearance and hover effects in the Style tab.

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.