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>