W
e
b
D
e
s
i
g
n
L
e
a
v
e
s

アニメーション元：https://icons8.com/cssload/en/animated-text

HTML 
<body>
<!--===LOADER ==以下の部分は適宜ご自分用に変更してください。表示する文字数により異なります。これは Web Design Leaves と表示する場合の例です。========-->
<div class="page-loader">
  <div id="fountainTextG">
    <div id="fountainTextG_1" class="fountainTextG">W</div>
    <div id="fountainTextG_2" class="fountainTextG">e</div>
    <div id="fountainTextG_3" class="fountainTextG">b</div>
    <div id="fountainTextG_4" class="fountainTextG"> </div>
    <div id="fountainTextG_5" class="fountainTextG">D</div>
    <div id="fountainTextG_6" class="fountainTextG">e</div>
    <div id="fountainTextG_7" class="fountainTextG">s</div>
    <div id="fountainTextG_8" class="fountainTextG">i</div>
    <div id="fountainTextG_9" class="fountainTextG">g</div>
    <div id="fountainTextG_10" class="fountainTextG">n</div>
    <div id="fountainTextG_11" class="fountainTextG"> </div>
    <div id="fountainTextG_12" class="fountainTextG">L</div>
    <div id="fountainTextG_13" class="fountainTextG">e</div>
    <div id="fountainTextG_14" class="fountainTextG">a</div>
    <div id="fountainTextG_15" class="fountainTextG">v</div>
    <div id="fountainTextG_16" class="fountainTextG">e</div>
    <div id="fountainTextG_17" class="fountainTextG">s</div>
  </div>
</div>
<!--========== LOADER ここまで==========--> 
<!--========== 以下にコンテンツを記述==========-->
<div>
  <p><img src="../images/largeImage01.jpg" alt=""></p>
  <p><img src="../images/largeImage02.jpg" alt=""></p>
  <p><img src="../images/largeImage03.jpg" alt=""></p>
</div>
CSS 
.page-loader {
  position: fixed;
  z-index: 10001;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #efefef;
}
/*===アニメーション==以下の部分は適宜ご自分用に変更してください。表示する文字数などにより異なります。これは Web Design Leaves と表示する場合の例です。========*/
#fountainTextG {
  width: 234px;
  margin: 200px auto;
}
.fountainTextG {
  color: rgb(0,0,0);
  font-family: Arial;
  font-size: 24px;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
  float: left;
  animation-name: bounce_fountainTextG;
  -o-animation-name: bounce_fountainTextG;
  -ms-animation-name: bounce_fountainTextG;
  -webkit-animation-name: bounce_fountainTextG;
  -moz-animation-name: bounce_fountainTextG;
  animation-duration: 2.09s;
  -o-animation-duration: 2.09s;
  -ms-animation-duration: 2.09s;
  -webkit-animation-duration: 2.09s;
  -moz-animation-duration: 2.09s;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-direction: normal;
  -o-animation-direction: normal;
  -ms-animation-direction: normal;
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  transform: scale(.5);
  -o-transform: scale(.5);
  -ms-transform: scale(.5);
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
}
#fountainTextG_1 {
  animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  -ms-animation-delay: 0.75s;
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
}
#fountainTextG_2 {
  animation-delay: 0.9s;
  -o-animation-delay: 0.9s;
  -ms-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
}
#fountainTextG_3 {
  animation-delay: 1.05s;
  -o-animation-delay: 1.05s;
  -ms-animation-delay: 1.05s;
  -webkit-animation-delay: 1.05s;
  -moz-animation-delay: 1.05s;
}
#fountainTextG_4 {
  animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  -ms-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
}
#fountainTextG_5 {
  animation-delay: 1.35s;
  -o-animation-delay: 1.35s;
  -ms-animation-delay: 1.35s;
  -webkit-animation-delay: 1.35s;
  -moz-animation-delay: 1.35s;
}
#fountainTextG_6 {
  animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
}
#fountainTextG_7 {
  animation-delay: 1.64s;
  -o-animation-delay: 1.64s;
  -ms-animation-delay: 1.64s;
  -webkit-animation-delay: 1.64s;
  -moz-animation-delay: 1.64s;
}
#fountainTextG_8 {
  animation-delay: 1.79s;
  -o-animation-delay: 1.79s;
  -ms-animation-delay: 1.79s;
  -webkit-animation-delay: 1.79s;
  -moz-animation-delay: 1.79s;
}
#fountainTextG_9 {
  animation-delay: 1.94s;
  -o-animation-delay: 1.94s;
  -ms-animation-delay: 1.94s;
  -webkit-animation-delay: 1.94s;
  -moz-animation-delay: 1.94s;
}
#fountainTextG_10 {
  animation-delay: 2.09s;
  -o-animation-delay: 2.09s;
  -ms-animation-delay: 2.09s;
  -webkit-animation-delay: 2.09s;
  -moz-animation-delay: 2.09s;
}
#fountainTextG_11 {
  animation-delay: 2.24s;
  -o-animation-delay: 2.24s;
  -ms-animation-delay: 2.24s;
  -webkit-animation-delay: 2.24s;
  -moz-animation-delay: 2.24s;
}
#fountainTextG_12 {
  animation-delay: 2.39s;
  -o-animation-delay: 2.39s;
  -ms-animation-delay: 2.39s;
  -webkit-animation-delay: 2.39s;
  -moz-animation-delay: 2.39s;
}
#fountainTextG_13 {
  animation-delay: 2.54s;
  -o-animation-delay: 2.54s;
  -ms-animation-delay: 2.54s;
  -webkit-animation-delay: 2.54s;
  -moz-animation-delay: 2.54s;
}
#fountainTextG_14 {
  animation-delay: 2.69s;
  -o-animation-delay: 2.69s;
  -ms-animation-delay: 2.69s;
  -webkit-animation-delay: 2.69s;
  -moz-animation-delay: 2.69s;
}
#fountainTextG_15 {
  animation-delay: 2.84s;
  -o-animation-delay: 2.84s;
  -ms-animation-delay: 2.84s;
  -webkit-animation-delay: 2.84s;
  -moz-animation-delay: 2.84s;
}
#fountainTextG_16 {
  animation-delay: 2.99s;
  -o-animation-delay: 2.99s;
  -ms-animation-delay: 2.99s;
  -webkit-animation-delay: 2.99s;
  -moz-animation-delay: 2.99s;
}
#fountainTextG_17 {
  animation-delay: 3.14s;
  -o-animation-delay: 3.14s;
  -ms-animation-delay: 3.14s;
  -webkit-animation-delay: 3.14s;
  -moz-animation-delay: 3.14s;
}
 @keyframes bounce_fountainTextG {
   0% {
   transform:scale(1);
   color:rgb(0,0,0);
  }
   100% {
   transform:scale(.5);
   color:rgb(255,255,255);
  }
}
 @-o-keyframes bounce_fountainTextG {
   0% {
   -o-transform:scale(1);
   color:rgb(0,0,0);
  }
   100% {
   -o-transform:scale(.5);
   color:rgb(255,255,255);
  }
}
 @-ms-keyframes bounce_fountainTextG {
   0% {
   -ms-transform:scale(1);
   color:rgb(0,0,0);
  }
   100% {
   -ms-transform:scale(.5);
   color:rgb(255,255,255);
  }
}
 @-webkit-keyframes bounce_fountainTextG {
   0% {
   -webkit-transform:scale(1);
   color:rgb(0,0,0);
  }
   100% {
   -webkit-transform:scale(.5);
   color:rgb(255,255,255);
  }
}
 @-moz-keyframes bounce_fountainTextG {
   0% {
   -moz-transform:scale(1);
   color:rgb(0,0,0);
  }
   100% {
   -moz-transform:scale(.5);
   color:rgb(255,255,255);
  }
}
jQuery 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script>
// ページのロード完了時にローダーをフェードアウト
$(window).on('load', function() {
  $(".page-loader").fadeOut('slow');
});
  
// ページのロードが完了しない場合でも10秒たったら強制的にローダーをフェードアウト（オプション）
setTimeout('stoploading()', 10000); 
function stoploading() {
  $(".page-loader").fadeOut('fast');
}
</script>