How to make my loading screen div take up my whole entire screen, even everything below it

Question

I'm trying to make a loading screen cause I'm using PHP to dynamically bring in specific services for this website I'm making and I tried using height: 100% on my wrapper div and it just does not work. I got to a point where I tried height: 100vh but obviously it only takes 100% of the view area so I can just scroll down and see the other content.

HTML

<?php include ('header.php'); ?>

</head>
<body>

<div class="background-loading">
<div class="wrapper">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <span>Loading</span>
</div>
</div>


<div class="banner-section" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(images3/heroImage.jpg);">
    <h1>Services</h1>
</div>

<div class="services-section">

    <div class="services">
        <?php
            require_once 'includes/dbh-inc.php';
            $sql = "SELECT serviceName, servicePageName, serviceImage FROM addService";
            $result = $conn-> query($sql);
            if ($result-> num_rows > 0) {
                while ($row = $result-> fetch_assoc()) {
                    echo '<div class="service-title">';
                    echo '<h2>'. $row["serviceName"] .'</h2>';
                    echo '</div>';
                    echo '<a href='. $row["servicePageName"] .'>';
                    echo '<div class="service-container" style="background-image: url(data:image/jpg;base64,'.base64_encode($row['serviceImage']).')">';
                    echo '<h1>Click Me!</h1>';
                    echo '</div>';
                    echo '</a>';
                }
            }
            $conn-> close();
        ?>
        
        <!-- 
        <div class="service-title">
            <h2>Business Printing</h2>

        </div>
        
        
        <a href="businessPrinting.php">
        <div class="service-container" style="background-image: url(images3/business1.jpg);">
            <h1>Click Me!</h1>
        </div>
        </a>
    
    
        <div class="service-title">
            <h2>Canvas Printing</h2>
        </div> 
        
        
        <a href="canvasPrinting.php">
        <div class="service-container" style="background-image: url(images3/canvas1.jpg);">
            <h1>Click Me!</h1>
        </div>
        </a>
        
        
        <div class="service-title">
            <h2>Custom Apperal</h2>
        </div>
        
        
        <a href="">
        <div class="service-container" style="background-image: url(images3/apperal1.jpg);">
            <h1>Click Me!</h1>
        </div>
        </a>
        
        <div class="service-title">
            <h2>Embroidery</h2>
        </div>
        
        
        <a href="">
        <div class="service-container" style="background-image: url(images3/embroidery1.jpg);">
            <h1>Click Me!</h1>
        </div>
        </a>
        
        
        <div class="service-title">
            <h2>Engraving</h2>
        </div>
        
        
        <a href="">
        <div class="service-container" style="background-image: url(images3/engraving1.jpg);">
            <h1>Click Me!</h1>
        </div>
        </a>
        
        
        <div class="service-title">
            <h2>Signs</h2>
        </div>
        
        
        <a href="signsAndBanners.php">
        <div class="service-container" style="background-image: url(images3/signs1.jpg);">
            <h1>Click Me!</h1>
        </div>
        </a>
        -->
        
        
    </div>
</div>
<?php include ('footer.php'); ?>

CSS

/* Screen Loader */

.background-loading {
    background-color: var(--clr-primary);
    z-index: 1000;
    height: 100vh;
    position: sticky;
}

.wrapper{
    width:200px;
    height:60px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}
.circle{
    width:20px;
    height:20px;
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
    left:15%;
    transform-origin: 50%;
    animation: circle .5s alternate infinite ease;
}

@keyframes circle{
    0%{
        top:60px;
        height:5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40%{
        height:20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}
.circle:nth-child(2){
    left:45%;
    animation-delay: .2s;
}
.circle:nth-child(3){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.shadow{
    width:20px;
    height:4px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top:62px;
    transform-origin: 50%;
    z-index: -1;
    left:15%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
    0%{
        transform: scaleX(1.5);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}
.shadow:nth-child(4){
    left: 45%;
    animation-delay: .2s
}
.shadow:nth-child(5){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.wrapper span{
    position: absolute;
    top:75px;
    font-family: 'Lato';
    font-size: 20px;
    letter-spacing: 12px;
    color: #fff;
    left:15%;
}

Does this answer your question? [How to make a div 100% of page (not screen) height?](https://stackoverflow.com/questions/1003613/how-to-make-a-div-100-of-page-not-screen-height) — Andrea Olivato, Jul 09 '21 at 16:24

Chris Wesseling · Accepted Answer · 2021-07-09T16:50:02.893

What you are looking for is called modal. One way to do that is use position fixed, a non-transparent background, 100% width and height and a higher z-index than the rest of your content. Then pin it to the top left.

Then when you are done loading, set its display to "none".

window.setTimeout(()=>{document.getElementById('background-loading').style.display = 'none';}, 3000);

#background-loading {
    background-color: white;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.wrapper{
    width:200px;
    height:60px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}
.circle{
    width:20px;
    height:20px;
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
    left:15%;
    transform-origin: 50%;
    animation: circle .5s alternate infinite ease;
}

@keyframes circle{
    0%{
        top:60px;
        height:5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40%{
        height:20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}
.circle:nth-child(2){
    left:45%;
    animation-delay: .2s;
}
.circle:nth-child(3){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.shadow{
    width:20px;
    height:4px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top:62px;
    transform-origin: 50%;
    z-index: -1;
    left:15%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
    0%{
        transform: scaleX(1.5);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}
.shadow:nth-child(4){
    left: 45%;
    animation-delay: .2s
}
.shadow:nth-child(5){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.wrapper span{
    position: absolute;
    top:75px;
    font-family: 'Lato';
    font-size: 20px;
    letter-spacing: 12px;
    color: #fff;
    left:15%;
}

<div id="background-loading">
<div class="wrapper">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <span>Loading</span>
</div>
</div>

Other content

That seemed to do the trick but for some reason I'm having an issue with those loading animation appearing on my header after I use javaScript to hide the divs any reason why? window.addEventListener("load", function () { const loader = document.querySelector(".background-loading"); const loading = document.querySelector(".wrapper") loader.className += "hidden"; loading.className += "hidden"; }); — xSmiiB, Jul 09 '21 at 16:42
this is the issue https://gyazo.com/02ea0eb9fd899ce0bd1b63b266de0843 — xSmiiB, Jul 09 '21 at 16:44
@xSmiiB Let me gues... Your .hidden class had `visibility: hidden` instead of `display: none`? I changed the answer a bit, to hide it after 3 seconds. — Chris Wesseling, Jul 09 '21 at 16:52
yeah haha I re read your answer and seen that you said to make it display none so I changed it to that, thanks! — xSmiiB, Jul 09 '21 at 16:54

How to make my loading screen div take up my whole entire screen, even everything below it

1 Answers1