How to create a css loader that hides, than shows the body

Question

I would like to create a loader for my webpage, but I am not sure how to keep the body hidden while the animated loader shows, than delete the loader, and show the body after it is done loading. Here is the CSS for the loader body {

 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);}
}

Show us what you've tried so far. We need some code to work with. — Michael Coker, Feb 15 '17 at 17:32
@MichaelCoker I added the CSS for the loader, if that helps. — profound.donut, Feb 15 '17 at 17:51

score 0 · Accepted Answer · answered Feb 15 '17 at 17:56

Without actual code is difficult to work. If you can use jquery, then this I how I would approach it. I would wrap all your content inside a <div> container and hide it. Then, the loading image should be placed inside another <div> outside the container one.

Once the full page and images are loaded, you can fire a javascript function to hide the loading image and show the container .

$('.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>

The snippet will load 2 big size images. You should delete your browser cache before running the snippet again. Hope this help.

How to create a css loader that hides, than shows the body

1 Answers1