読み込んだら左から右へ流れるように開くロード画面

2020年8月5日

最近よく見かける「左から右へ流れるようなアニメーション」をローディング画面に実装したので忘れないようにメモしておきます。

↓ここのResultを押すと何度もアニメーションを見る事が出来ます。

ソースコード

まず、HTMLとcssをこのように書きます。

HTML

<div class="loading-wrap"></div>

<div id="contents">
  <p>ここに内容が表示される</p>
  <p>ここに内容が表示される</p>
  <p>ここに内容が表示される</p>
  <p>ここに内容が表示される</p>
  <p>ここに内容が表示される</p>
</div>

css

.loading-wrap {
  position: fixed;
  height:100vh;
  width:100vw;
  background-color:#555;
  left: 0px;
  top: 0px;
  z-index: 9999;
  width: 100%;
  height: 100%;
}
.loading-anime {
  animation-name: loadinganime;
  animation-timing-function:ease;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes loadinganime {
  from {
    transform: translateX(0);
  }
  30%, 70% {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.loading-wrapは画面全体を覆う為のクラスです。
HTMLとcssのみですと、黒い(#555)が画面いっぱいに表示されて、アニメーションしてくれません。

アニメーションはcssで指定していますが、クラスはjsで渡していきます。
クラスを渡すとアニメーションが動き出します。

$(window).on('load', function(){
	$(".loading-wrap").addClass('loading-anime');
});

画面を読み込んだら.loading-wrapに.loading-animeを渡し、アニメーションが動き始めました。

ローディング画面を簡単に実装する事が出来ました！