Are you looking to add a progress cursor in WordPress? A progress cursor visually shows how far a user has scrolled on the page, adding an interactive and functional element that enhances user engagement and navigation.
With the Mouse Cursor block from Nexter Blocks, you can easily add a progress cursor to your WordPress website.
To check the complete feature overview documentation of the Nexter Blocks Mouse Cursor block, click here.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
To do this, add the Mouse Cursor block to the page and follow the steps –
1. Select Body from the Cursor Area dropdown.
2. Then select Follow Circle from the Type dropdown.
3. From the Circle Cursor Type section, select Predefined.
4. Then, from the Select dropdown, you have to select a cursor icon.
5. After that, select Progress from the Circle Style section.
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.
