Elementor Premium Smooth Animation Preloader

Elementor Premium Smooth Animation Preloader

Element.How also offers premium tutorials! Check them here:

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.

Access tutorial

$29/one time Purchase access


  • Gain Access to This TutorialUnlock complete access to the current tutorial:
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access


  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 30 day money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

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

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

Checkout the Elementor Addon Finder directly

4 Responses

  1. Hi Maxime!
    I used this kind of preloader in one of my projects and it really works great. Thanks for providing this! I just have one question: Is there a way to use it slightly different when navigating through the website? So that it works more like a page transition? The only thing I'd add is like an Entrance Animation as shown on this website for example: https://www.fourmeta.com/
    In my case the desired outcome would be that it moves in from the bottom as I change the page and moves out smoothly to the top (as it already does). Right now it just pops up as an entrance. I was checking your code, but couldn't figure it out yet. I hope you get my request.

    Thanks in advance,

    1. Hey Lukas!

      Page preloaders, and page transitions are two different things... You can't just make small adjustments here to be able to turn it into a page transition...

      It would require a new tutorial, and I'm hesitant because Elementor already has a page transition solution.

      Did you try using Elementor's solution, maybe along with this tutorial, to get what you want?

      1. Hey Maxime!
        Thanks for your quick reply as always. I get what you mean, also was thinking about that. Just have heard that it might be not as stable just yet. Also there's already a preloader solution there, that's why I thought your solution might be cleaner and working for both as their options are still very limited.
        I implemented Elementor's solution now and it's working just fine. However I'd love for them to integrate an option where I could choose at least an image to go along with it as there is for the preloader. It would be just a nice-to-have for now, but if you have any idea or a quick fix that would be greatly appreciated 🙂

    2. Hey Lukas!

      Sorry for getting back to you just now!

      I don't have a quick fix unfortunately. I suggest for now you use the Elementor transition feature...

      I will add a page transition tutorial to my list of tutorials to create!


Leave a Reply