Elementor Premium Smooth Animation Preloader

Elementor Premium Smooth Animation Preloader

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

This tutorial is about how to add this great preloader to your website, with your own graphic and texts.

See it here: (click the little reload icon on the top right)

Visit the demo page directly.


  • Graphic, texts and colors are customizable
  • Option to play only one time per user visit
  • Won't play if not in view (ie, if the user opens your site in a new tab in the background)

This tutorial is only recommended for users comfortable with modifying CSS. Due to the nature of the design, and all the different variations that could be made out of it, this particular tutorial comes with limited customization support & help. I will only support in cases where you can't get it working at all. I won't help with modifying the animation.

The colors and font settings should be simple enough to adjust for most users. The animation itself might be challenging.

Thank you for your understanding!

Let's get started!

First, add this code to your project

This is a premium tutorial. Purchase access to unlock the full tutorial.


Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly


Leave a Reply