A lightweight gradient progress bar for page transitions, asynchronous actions and loading states.
Difficulty: medium
Type: Frontend Effect
Status: Copy & Paste Ready
1. Add an HTML widget in Elementor.
2. Paste the HTML code into the widget.
3. Add the CSS code to Elementor Custom CSS or your website stylesheet.
4. Place the loader where your application displays a pending state.
5. Replace example text, links and labels with your own content.
6. Test the loader on desktop, tablet and mobile.
The effect works without JavaScript. Add visually hidden status text when the loader communicates real progress.