Animation loader — A percentage loader animation component

This component is fully customizable with speed of the animation, colors and easing for a custom branded experience.

How to actually set up this component to work on your site:

1. Set it position type to fixed fixed (Absolute can work as well). Set the left and right positions to zero.

2. Set its width to 100% and height to 100vh so that it covers the full page no matter the screensize.

3. Make the Z-Index 10 so that it appears ontop of everything else

4. Add Pointer Events: None –– Go under the styles Tab - Click the Plus Icon , you will see the Pointer Events option. Add it and set it to none, this will make sure that the loader doesn't block your site content.PS: Use the image below to follow the steps by using the blue marked numbers in the picture

That's all, everything else is about what you want to edit, the colors, the counter, duration and more

Aimation Tip: Try to make sure that the counter duration and the transition duration are close, so that the loader line and the counter are at the same pace to create a realistic 100% loader effectThat's all, for any questions, feel free to reach out.