jQueryのコピペでできるページ切り替え時のローディングアニメーション

ローディングアニメーション

ページ内のコンテンツ量が多く、レンダリングに時間がかかる場合や、ページ遷移のアクセントにローディングアニメーションを入れる方法があります。

ローディングアニメーションを結構頻繁に見かけ、いろんなパターンがありますが、この記事は、

  • ローディングアニメーションのデザインサンプル。
  • HTML+CSS+jQueryのコピペ用コード一式。
  • コピペ用コードの簡単な解説。

です。

今回はそんなjQueryのコピペでできるページ切り替え時のローディングアニメーションのご紹介です。

デザインサンプル

ローディングアニメーションのサンプルです。

このページを開く時にロゴが表示され、その下あたりに真ん中から両端へ向かって線が伸びていき、線が両端につくとページが徐々に表示されるアニメーションです。

コピペする時の注意点

この記事で紹介のコピペ用コードには、jQueryの組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。

MEMO
当サイトでは以下のjQueryを使用しています。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
上記のような記述が、htmlファイルの
<head>〜</head>
の中に無い場合その中へ貼り付けましょう。
かかかず
かかかず

jQueryは必須でないと動かないので、書きこんでからコピペください。

コピペ用コード一式

ローディングアニメーションは、HTMLとCSS。そしてjQueryの3つをコピペすればOKです。

コードを表示する

HTML

<div class="loading-anime-wrap">
  <img class="loading-anime-img" src="https://dubdesign.net/wp-content/uploads/2021/05/bluefvsp_logoonly3.svg">
  <div class="loading-anime-line"></div>
</div>

CSS

.loading-anime-wrap {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: rgb(200,228,255);
background: linear-gradient(270deg, rgba(200,228,255,1) 0%, rgba(107,182,255,1) 100%);
  z-index: 9999;
}
.loading-anime-wrap .loading-anime-img {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 500px;
}
.loading-anime-wrap .loading-anime-line {
  background-color: #fff;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 75%;
  transform: scale(0, 1);
  animation: example 1.5s ease 0.5s 1 forwards;
}
@keyframes example {
  0% {
    transform: scale(0, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

jQuery

$(function(){
   $(window).on('load',function(){
     $(".loading-anime-wrap").delay(2000).fadeOut('slow');
   });
   function loaderClose(){
     $(".loading-anime-wrap").fadeOut('slow');
   }
   setTimeout(loaderClose,10000);
});

コピペ用HTMLの解説

HTMLのコードは、<body>〜</body> の中に適当な場所へコピペするだけでも大丈夫ですが、極力<body> の始めの方に記載した方が、構文的にも綺麗です。

コピペ用CSSの解説

使うCSSは主に3つで、それぞれいじって色などを変更することができます。

.loading-anime-wrap

ローディングアニメーションが表示されている時のclassです。background が背景色なので、色や背景を変更する場合はここを弄ります。

.loading-anime-wrap .loading-anime-img

ローディング中に表示されるロゴの部分で、img タグにclassをつけてサイズ調整しています。

.loading-anime-wrap .loading-anime-line

ローディング中の両端に伸びる線で、background-color で色を指定して、animation が秒数に関連する記述です。

コピペ用jQueryの解説

.loading-anime-wrap のclassをロード時のトリガーでいじる設定で、コード内に入っている 2000 と 10000 の数字の場所を変えると、ローディングのアニメーションを変更することができます。

もしいじる場合、CSSの.loading-anime-wrap .loading-anime-lineanimetion の秒数をいじって調整するようにしてください。

さいごに

ローディングアニメーションは、レンダリングが終わるまでの繋ぎでユーザーにあとどれくらいで表示されるのかの目安としては有効だと思いますが、そもそもページ切り替え自体がスムーズであれば、不必要だったりするので、目的に応じた利用が大切です。

その為、とりあえず的な実装は避けるようにして、適切な利用を心がけるようにしましょう。

レンタルサーバー

高速・高機能・高安定性

ConoHa WING

ConoHa Wingは、速くて安定性の高いレンタルサーバーです。その他のConoHa Wingの記事はこちらからどうぞ。

ConoHa WING