Elementor Premium Images Reveal Preloader

Elementor Premium Images Reveal Preloader

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

In this tutorial you are going to learn how to add this nice preloader to your website, using your own images.

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

Visit the demo page directly.


  • Flash through 6 images
  • Easily swap with your own images
  • Checks for image load time, to play it at the ideal time for UX and Performance
  • Plays when the browser has focus (the animation won't play out if opened in a background tab, for example)
  • Play only once per visit (optional)
  • Change the color of the lines at the end, ideally to match your page's background color

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 making it look this or that way, or changing the animation.

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