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>
<script>
document.addEventListener('DOMContentLoaded', function() {
let loader = document.querySelector('.my-preloader');
loader.style.opacity = 0;
loader.addEventListener('transitionend', () => loader.remove());
});
</script>
<style>
.my-preloader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
pointer-events:none;
background: url('https://yourwebsite.com/wp-content/uploads/2019/08/loader.svg') 50% 50% no-repeat #ffffff;
}
.elementor-editor-active .my-preloader {
display: none;
}
</style>
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.
