Show Vanille Preloader only once per site visit

Question

I have this code for a vanilla preloader:

<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: 1s 3s;
pointer-events:none;
background: url('https://misfitmovement.eu/wp-content/uploads/2022/12/Black-Video.gif') 50% 50% no-repeat #000; /* Change the #fff here to your background color of choice for the preloader fullscreen section */
background-size: 500px;
}
.elementor-editor-active .vanilla-preloader {
display: none;
}
</style>

The preloader is working fine, but every time I enter the page where I put the HTML code it will show again. Is there a way to avoid that and only shows once per session or site visit.

I've tried some codes from other questions, but those don't work for my problem.

Answer 1

You can try using cookies, like once if the page is loaded set some cookie like, loaded: true or some other thing of your wish and based on the value of the cookie, you can set the preloader opacity or display

Checkout here for implementation of cookies: https://www.w3schools.com/js/js_cookies.asp

and checkout the video for more designs of preloaders: https://youtu.be/chkcd11okxc