Comment créer un chargeur CSS qui cache, que montre le corps

Question

Je voudrais créer un chargeur pour ma page Web, mais je ne sais pas comment garder le corps caché pendant que le chargeur animé montre, que supprimer le chargeur, et montre le corps après le chargement. Voici le CSS pour le corps du chargeur {

background-color:crimson; 
    height:100%; 
    width:100%; 
} 
.one, .two, .three { 
    height:25px; 
    width:25px; 
    background-color:white; 
    border-radius:100%; 
    float:left; 
    margin:5px; 
} 
.main { 
    padding-top:25%; 
    padding-left:47%; 
} 
.one { 
    animation-name:dot-one; 
    animation-duration:1s; 
    animation-iteration-count:infinite; 
    animation-delay:0.10s; 
} 
.two { 
    animation-name:dot-two; 
    animation-duration:1s; 
    animation-iteration-count:infinite; 
    animation-delay:0.20s; 
} 
.three { 
    animation-name:dot-three; 
    animation-duration:1s; 
    animation-iteration-count:infinite; 
    animation-delay:0.30s; 
} 
@keyframes dot-one { 
    0% {transform:scale(.5);} 
    50% {transform:scale(1);} 
    100% {transform:scale(.5);} 
} 
@keyframes dot-two { 
    0% {transform:scale(.5);} 
    50% {transform:scale(1);} 
    100% {transform:scale(.5);} 
} 
@keyframes dot-three { 
    0% {transform:scale(.5);} 
    50% {transform:scale(1);} 
    100% {transform:scale(.5);} 
} 

Answer 1

Sans code réel est difficile à travailler. Si vous pouvez utiliser jquery, alors c'est comme ça que je l'aborderais. J'envelopperais tout votre contenu dans un conteneur <div> et le cacherais. Ensuite, l'image de chargement doit être placée à l'intérieur d'un autre <div>.

Une fois la page entière et les images chargées, vous pouvez déclencher une fonction javascript pour masquer l'image de chargement et afficher le conteneur.

$('.content').hide(); 
 
    $(window).on("load", function() { 
 
     $('.loader').hide(); 
 
     $('.content').show(); 
 
    });

body { 
 
     position: relative; 
 
    } 
 

 
    .content { 
 
     width: 100%; 
 
     height: 100vh; 
 
     display: block; 
 
    } 
 

 
    .loader { 
 
     position: absolute; 
 
     top: 50px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg"> 
 
    <img src="http://freebigpictures.com/wp-content/uploads/2009/09/hill.jpg"> 
 
     </div> 
 
     <div class="loader"> 
 
      <img src="https://media4.giphy.com/media/y1ZBcOGOOtlpC/200_s.gif"> 
 
     </div>

L'extrait se charger 2 images de grande taille. Vous devez supprimer le cache de votre navigateur avant de réexécuter l'extrait. J'espère que cette aide.