html - 本体を表示するよりも非表示にする CSS ローダーを作成する方法

Question

Web ページのローダーを作成したいのですが、アニメーション化されたローダーが表示されている間は本体を非表示にしておく方法がわかりません。ローダーを削除して、読み込みが完了した後に本体を表示する方法がわかりません。ローダー本体の CSS は次のとおりです {

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