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

2021年5月20日 3分

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

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

ローディングアニメーションのデザインサンプル。
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);
});