Get Premium

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.

Features:

  • 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

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Elementor Premium Smooth Animation Preloader
  • 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

Includes

  • 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
  • 6 months 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.
  • Support not needed!Due to personal circumstances, I no longer offer support. The vast majority of customers never needed support to start with, so chances are you will be just fine, the tutorials and templates provided are complete.

    I also extended the refund window from 1 to 6 months, during which you can get a full refund for any reason.
  • 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.
* 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 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

21 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,
    Lukas

    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!

      Cheers!

    1. Greetings!

      Change this line:

      if (node.nodeType === 1 && node.tagName.toLowerCase() !== 'script' && node.tagName.toLowerCase() !== 'style') {

      To this:

      if (node.nodeType === 1 && node.tagName.toLowerCase() !== 'script' && node.tagName.toLowerCase() !== 'style' && !node.classList.contains('sp_preloader')) {

      Cheers!

      1. My apologies it does work now thanks for the great support and work Max 🙂

    1. Greetings Coco!

      I updated the code in the tutorial for this. Please update to the latest version of the code, and it should work fine!

      Cheers!

  4. Hi Maxime, is it possible to reduce the preloader down to just show the logo part in pink, not the titles part in yellow? I'd imagine it's just a case of stripping out the code related to the titles but I don't want to butcher it. ; )

    1. Hey David!

      Try this:

      /* Code from https://element.how/elementor-premium-preloader/
* Copyright 2022 Element.How
* Licensed for personal and client use for customers who purchased access
* No redistribution or resale allowed
*/
function element_how_premium_preloader() {

if (\Elementor\Plugin::$instance->editor->is_edit_mode() || \Elementor\Plugin::$instance->preview->is_preview_mode() ) {
return; /* don't run while in the editor */
}

    ?>
<style>

html {
   scrollbar-gutter: stable; /* to avoid the layout shift after scrolling is enabled when the preloader ends */
}

.sp_preloader {
   display: block;
}

.logo-background {
   display: flex;
   justify-content: space-around;
   align-items: center;
   position: fixed;
   left: 0;
   top: -2%;
   width: 100%;
   height: 108%;
}

.logo-background {
   background-color: #FF4578;
   box-shadow: 0px 0px 19px 4px #FF4578;
   z-index: 99999;
}

.logo-background.playanim {
   animation: 0.9s forwards slideUp cubic-bezier(.56, .17, .68, 1) 1.9s;
}

@keyframes slideUp {
   0% {
      transform: translateY(0%);
   }

   10% {
      transform: translateY(1.8%);
   }

   100% {
      transform: translateY(-110%);
   }
}

#preloader-logo {
   width: 530px;
   max-width: 90vw;
   height: auto;
   opacity: 0;
   transform: translateY(-50px);
   -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
   clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
}

#preloader-logo.playanim {
   animation-name: titleAnimation;
   animation-timing-function: ease;
   animation-duration: 3s;
}

#preloader-logo {
   animation-delay: 0.3s;
   animation-fill-mode: forwards;
}

@keyframes titleAnimation {
   0% {
      transform: translateY(-50px);
      opacity: 0;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
   }

   20% {
      transform: translateY(0);
      opacity: 1;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
   }

   80% {
      transform: translateY(0);
      opacity: 1;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
   }

   100% {
      transform: translateY(50px);
      opacity: 0;
      -webkit-clip-path: polygon(100% 0, 100% 0%, 0 100%, 0 0);
      clip-path: polygon(100% 0, 100% 0%, 0 100%, 0 0);
   }
}


.logo-background.noplay,
svg.noplay {
   animation-play-state: paused;
}

body.elementor-editor-active .sp_preloader {
   display: none;
}


</style>


<div class="sp_preloader">
   <div class='logo-background'>
      <img id='preloader-logo' src="https://templates.element.how/wp-content/uploads/2021/03/elementhow_white.svg" />
   </div>
</div>


<script>


(function () {

   let introElement = document.querySelector('.sp_preloader');
   let introElements = document.querySelectorAll('.sp_preloader *');

   function manageVisibilityChange() {
      if (document.hidden) {
         introElements.forEach(e => e.classList.add('noplay'));
      } else {
         introElements.forEach(e => e.classList.remove('noplay'));
      }
   }

   manageVisibilityChange();

   document.addEventListener('visibilitychange', manageVisibilityChange, false);

   document.addEventListener('DOMContentLoaded', function () {
      introElements.forEach(e => e.classList.add('playanim'));
   });

   introElement.addEventListener('animationend', function () {
      document.documentElement.style.removeProperty('overflow');
   });



   /* play only one time per browser session */
   
   let oncePerSession = document.querySelector('.sp_preloader');
   if ((sessionStorage.getItem('played') == '1')) {
      oncePerSession.style.display = 'none';
   } else {
   document.documentElement.style.overflow = "hidden";
   }
   window.sessionStorage.setItem('played', '1');

}());
</script>
<?php
}
add_action( 'wp_head', 'element_how_premium_preloader');

      Cheers!

  5. Hi Maxime, great thanks for sending that through. I've activated it and it seems to work fine but something odd happens. I've set it to run only on the homepage and only to run once as per the instructions above which all looked to be working just fine. However, when I refresh the homepage I'm not able to scroll and the page seems unresponsive.
    It's pretty weird, do you have any idea why this is happening and what could be a good fix?

    The url is https://www.nextdayrealestate.eu/

    1. Hey David!

      You are right, the logic didn't quite work for playing only one time.

      I updated the JavaScript part of my comment, please import it again, it should work fine now.

      Cheers!

  7. Hey Maxime! I've used this feature on several sites now and it works great! However, now I've got a client who would prefer to have a simple fade out animation instead of the slide up. I managed to fade out the logo, but somehow I can't find the part, which controls the animation of the background. Can you help me out here?

    Thanks in advance,
    Lukas

    1. Hey Lukas!

      Change this line:

      .titles-background.playanim {
      animation: 0.9s forwards slideUp cubic-bezier(.56, .17, .68, 1) 4.4s;
      }

      to this:

      .titles-background.playanim {
      animation: 0.9s forwards fadeOut cubic-bezier(.56, .17, .68, 1) 4.4s;
      }

      and add this:

      @keyframes fadeOut {
      0% {
      opacity: 100%;
      }
      100% {
      opacity: 0%;
      }
      }

      Cheers!

      1. Hey Maxime!
        In this case I only use the Logo Background, but I managed to change the corresponding parameters to make it work. Thanks for your help!

        Cheers!

Leave a Reply