How to change the animation of the pre loader

currently I have created a preloader for my wordpress website. However, I would like the preloader to have an exit of a round instead of fading. Take as an example the website https://cash.app/ , does anyone have any idea what I need to change to my code to get this working? <div class="vanilla-preloader" ></div> <script> document.addEventListener('DOMContentLoaded', function() { let loader = document.querySelector('.vanilla-preloader'); loader.style.opacity = 0; loader.addEventListener('transitionend', () => loader.remove()); }); </script> <style> .vanilla-preloader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; transition: 3s opacity; pointer-events:none; background: url('/wp-content/uploads/images/loader.svg') 50% 50% no-repeat #000; /* Change the #fff here to your background color of choice for the preloader fullscreen section */ } .elementor-editor-active .vanilla-preloader { display: none; } </style>

Comment (0)

You’ll be in good company