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