Preloader for Elementor website

Until the page transitions and preloader become parts of Elementor’s core, here is an option to implement a preloader for Elementor website.

1. Open your header (if you made one within Templates > Theme Builder section) and insert a new row with HTML widget in it:

2. Copy the following code in it:

<div class="my-preloader" ></div>
   document.addEventListener('DOMContentLoaded', function() {
      let loader = document.querySelector('.my-preloader'); = 0;
   		loader.addEventListener('transitionend', () => loader.remove());
.my-preloader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('') 50% 50% no-repeat #ffffff;
.elementor-editor-active .my-preloader {
display: none;

3. Change the URL from the code to match the actual URL of the file that you downloaded and hosted at your own domain/WordPress website. Save the header and you are done.

By janoshke

Web developer and IT consultant. Freelancer with full respect for OpenCart and WordPress. Gamer, (ex)drummer and parent.

Leave a ReplyCancel reply

Exit mobile version