How to hide all body elements before preloader finishes loading

Question

I have made a full screen Preloader counter. And I need all my body elements to be hidden while the Preloader loads, and when it finishes, the other body elements such as navbar and sections, can be appeared on screen.

Here is my html code:

And this is the CSS of preloader:

.loader{
    height: 100%;
    background: #000;
    position: absolute;
    top:0;
    left:0;
}
.preloader{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:#fff;
    pointer-events: none;
    animation:fadeout 0.5s linear forwards;
    animation-delay:8.5s;
}
@keyframes fadeout
{
    0%
    {
        opacity:1;
    }
    100%
    {
        opacity:0;
    }
}
.count{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:18vw;
    color:#fff;
    font-weight: 800;
    mix-blend-mode: difference;
    text-align:right;
}

And this also the jQuery part of Preloader:

$(document).ready(function(){
    count = 0;
    counter = setInterval(function(){
        if(count < 101){
            $('.count').text(count + '%');
            $('.loader').css('width', count + '%');
            count++
        }
        else{
            clearInterval(counter)
        }
    }, 80)
});

So how can I hide all body elements until the Preloader finishes its progress?

user_14024072 · Answer

Try to give the preloader enough z-index to be on top of any other element on your screen.

.loader{
    background: #000;
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}
.preloader{
    position:absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    ...
}

user_3713193 · Answer

Play with z-index in the preloader or hide the navbar and sidebar until the preloader ends.

For example:

$(document).ready(function(){
    count = 0;
    counter = setInterval(function(){
        if(count < 101){
            $('.count').text(count + '%');
            $('.loader').css('width', count + '%');
            count++
        }
        else{
            clearInterval(counter)
            $(".sidebar").show();
            $(".navbar").show();
        }
    }, 80)
});

user_7208109 · Answer

This is how I would do it with Jquery. I don't have your HTML so I use a random one.

Note that I used $('body').children().not('script').show();, that's because here in StackOverflow, show() function shows script content.

$('body').children().hide();
$('.preloader').show();
$(document).ready(function(){
    count = 0;
    counter = setInterval(function(){
        if(count < 101){
            $('.count').text(count + '%');
            $('.loader').css('width', count + '%');
            count++
        }
        else{
            clearInterval(counter)
            $('body').children().not('script').show();
            $('.preloader').hide();
        }
    }, 80)
});

How to hide all body elements before preloader finishes loading

3 Answers