---
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-09-14
lang: en
author: "Aditya Sharma"
description: "Progress Cursor (Body) is one of the three Follow Circle styles in the Mouse Cursor widget. Instead of a filled circle it draws a two-ring SVG that trails the pointer...."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Add-a-Progress-Cursor-in-Elementor_-1024x536.jpg
word_count: 874
---

# 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.

**Progress Cursor (Body)** is one of the three **Follow Circle** styles in the **Mouse Cursor** widget. Instead of a filled circle it draws a two-ring SVG that trails the pointer.

It is the only cursor style that is tied to one **Cursor Area**: it is built only when the area is **Body**, which is what the *(Body)* in its name means.

*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 Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/mouse-cursor/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Mouse Cursor is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows no cursor effect and no notice.- **Widget to enable:** Mouse Cursor, switched on under **The Plus Addons > Widgets**.- **Check it on the published page:** the widget draws nothing in the Elementor editor. The panel says so too: *This widget works only at frontend*.- **Desktop only:** every cursor effect is switched off when the browser window is **991px wide or narrower**, so nothing happens on phones and most tablets.

## Add a Progress Cursor

- Drag the **Mouse Cursor** widget onto the page.- Set **Cursor Area** to **Body**. This style does not work with any other area.- In **Type**, click the **Follow Circle** picture.- Leave **Pointer Type** on **Predefined** and pick the pointer the visitor sees underneath in **Select Pointer**.- Set **Follow Circle Style** to **Progress Cursor (Body)**.

![Follow Circle Style set to Progress Cursor (Body) in the Mouse Cursor widget](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-progress-style.webp)

Two extra sliders appear. They are the **radii** of the two circles the ring is drawn from, inside a fixed 200×200 drawing area, which is why they stop at 90.

![First Circle Size and Second Circle Size sliders in the Mouse Cursor widget](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-progress-sizes.webp)

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **First Circle Size** | Radius of the track ring. | 80 (0–90) |
| **Second Circle Size** | Radius of the ring drawn on top of it. | 80 (0–90) |
| **Cursor Left Offset** / **Cursor Top Offset** | Move the ring away from the pointer. | 10px each |
| **Circle Z-Index** | Stacking order. Raise it if the ring hides behind page content. | 1 |

With both sizes at 80 the two rings sit exactly on top of each other. Setting them apart — 80 and 60, say — draws two visibly different rings.

## Colours

Open the **Style** tab and the **Follow Circle** section. Two colours matter here.

![Circle Color and Circle Progress Color fields in the Follow Circle style section](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-progress-colors.webp)

- **Circle Color** paints the track ring.- **Circle Progress Color** paints the ring drawn over it.- **Circle Stroke Width** and **Circle Stroke Progress Width** set how thick each one is. Both start at 10px.- The **Hover** tab repeats all four for when the pointer is over a matching element.

On the published page the result is a ring that trails the pointer:

![Web page where a blue ring cursor trails the pointer, photographed part-way down a long page](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-result-progress-ring.webp)

## The Progress Does Not Advance

The name promises a ring that fills as the visitor scrolls. In this version it does not. On a 3,872px-tall test page the ring was measured at 0%, 25%, 50%, 75% and 100% scroll and looked identical every time — the dash offset that would draw a partial arc was never set, so the progress ring is always drawn complete. This was reproduced signed in and signed out, on a fresh load and after a reload, with no JavaScript errors on the page.

> *Treat **Progress Cursor (Body)** as a two-ring circle cursor rather than a scroll indicator. If you need a real scroll indicator, use a scroll progress bar instead.*

## Which Elements Count as Hover

**List of Tags for Hover Effect** in the **Content** section takes a CSS selector and starts as `a`. Separate several with commas. Anything that is not a valid CSS selector stops the cursor working altogether.

![List of Tags for Hover Effect field in the Mouse Cursor widget set to a, img](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-tag-list.webp)

![Recording of the Mouse Cursor panel with Progress Cursor (Body) selected](https://theplusaddons.com/wp-content/uploads/2025/01/mouse-cursor-progress-cursor.gif)

## How It Behaves

- The ring is drawn only with **Cursor Area** set to **Body**. With any other area you get an ordinary circle instead, with no ring and no SVG.- **First Circle Size** and **Second Circle Size** are radii in a fixed 200×200 box, so 90 is as large as the ring gets.- The ring is hidden until the pointer first enters the page.- The effect is switched off entirely below 992px of window width.

## Limitations

- The widget is Pro only. With the Pro plugin switched off there is no cursor and no notice.- Nothing happens at **991px** of window width or below.- **The ring does not track scrolling in this version.** It is drawn complete and stays that way from the top of the page to the bottom.- The style only builds its ring with **Cursor Area** set to **Body**. Choosing any other area silently gives you a plain circle.- **Circle Z-Index** starts at 1, so the ring sits behind most positioned content until you raise it.- The ring cannot be made larger than its 200×200 drawing area, whatever you set the two sizes to.

## Troubleshooting

### I see a plain circle, not a ring

**Cursor Area** is not set to **Body**. The ring is only built for that area.

### The ring never fills as I scroll

That is the known limitation above, not a setting you have missed.

### I can only see one ring

**First Circle Size** and **Second Circle Size** are both 80 by default, so the two rings overlap exactly. Move one of them.

### The ring keeps vanishing behind my sections

Raise **Circle Z-Index**.

## Related Docs

- [Mouse Cursor widget settings overview](https://theplusaddons.com/docs/add-a-custom-cursor-in-elementor/)- [Add a follow circle cursor](https://theplusaddons.com/docs/add-a-follow-circle-cursor-in-elementor/)- [Add a blend cursor](https://theplusaddons.com/docs/add-a-blend-cursor-in-elementor/)- [Add a follow image cursor](https://theplusaddons.com/docs/add-a-follow-image-cursor-in-elementor/)