How do I add a delay to preloader so the preloader will display even after page load for a couple of seconds

Question

I am trying to add a delay to my preloader to give the page a cool effect. I would like to have the preloader display for a couple seconds even after the page has loaded. I have the preloader and it works fine I just need some help adding a delay to it.

here is my current code.

JS

window.addEventListener('load', () => {
        const preload = document.querySelector('.preload');
        preload.classList.add('preload-finish');
        
});`

CSS

    .preload    {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #77b3d4;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

.preload h3 {
    position: absolute;
    top: 75%;
    transform: translateY(-75%);
    color: white;
    font-size: 40px;
    font-family: sans-serif;
}

.preload-finish {
    opacity: 0;
    pointer-events: none;
}

Answer 1

one solution is that you can add an transition delay property on the.preload-finish like in the example below: You can define the value in seconds or miliseconds.

 .preload-finish { opacity: 0; pointer-events: none; transition-delay: 2s; }

Here is an artical where you can read more about this property. It's supported by all browsers today so you don't need any prefixes. https://www.w3schools.com/cssref/css3_pr_transition-delay.asp

Answer 2

You can also use the setTimeout() javascript function:

window.addEventListener('load', () => {
        const preload = document.querySelector('.preload');
        setTimeout( function() {
            preload.classList.add('preload-finish');
        }, 1000 );
});

Change the 1000 at the end to whatever number you like to set the delay in milliseconds. Here is a tutorial by w3schools https://www.w3schools.com/jsref/met_win_settimeout.asp