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.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
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).
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.
| 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 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:
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.
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.
