ニューステラのロゴ

お問い合わせはこちら

ページ遷移時のローディングアニメーションをjQueryとCSS3で実装する方法

2017.3.2 Inoue 開発・Webデザイン

ページ遷移時にローディングアニメーションを表示する方法は色々ありますが、今回は十数行ほどの簡単なJS(jQuery)とCSSを使って実装してみたいと思います。簡単コピペ実装可能な内容になっています。

ページ遷移時のローディングアニメーションとは

ページ遷移時によくあるローディングアニメーション、例えばこういうものです。

株式会社ニューステラのコーポレートサイトに実装しているローディングアニメーション

サイト内リンクをクリックしてみていただくと、実際の挙動が確認いただけます。こんな感じのやつを実装していきます。

弊社で実装しているものと全く同じものをご紹介するのも何かアレなので、こんな感じのデモページを用意してみました。

DEMO

※長くローディングさせるために容量の大きい写真を置いています。回線によってはとても重たいかもしれません。

とりあえずこんなアニメーションを今回作ってみます。

HTML

今回用意したデモのHTMLは以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex">
  <title>ページローディングテスト1</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>

  <div class="l-wrap">
    <a href="https://v1.newstella.co.jp/wp-content/themes/nst/demo/170302-pageload/2.html" class="button">ページ遷移してみる</a>
    <img src="https://v1.newstella.co.jp/wp-content/themes/nst/demo/170302-pageload/1.JPG" alt="テスト画像1">
    <img src="https://v1.newstella.co.jp/wp-content/themes/nst/demo/170302-pageload/2.JPG" alt="テスト画像2">
    <img src="https://v1.newstella.co.jp/wp-content/themes/nst/demo/170302-pageload/3.JPG" alt="テスト画像3">
  </div>

  <div id="js-loader" class="loader">
    <div class="loader-animation"></div>
  </div>

</body>
</html>

HTMLに関しては重要なのは18～20行の3行くらいです。あとjQueryを使うので7行目のように読み込んでおげておく必要があります。

JS(jQuery)

JS(jQuery)は以下のようになります。
4行目にあるURLhttps://v1.newstella.co.jpは実装したいサイトのURLに変更する必要があります。

// ローディング画面をフェードインさせてページ遷移
$(function(){
    // リンクをクリックしたときの処理。外部リンクやページ内移動のスクロールリンクなどではフェードアウトさせたくないので少し条件を加えてる。
    $('a[href ^= "https://v1.newstella.co.jp"]' + 'a[target != "_blank"]').click(function(){
        var url = $(this).attr('href'); // クリックされたリンクのURLを取得
        $('#js-loader').fadeIn(600);    // ローディング画面をフェードイン
        setTimeout(function(){ location.href = url; }, 800); // URLにリンクする
        return false;
    });
});

// ページのロードが終わった後の処理
$(window).load(function(){
  $('#js-loader').delay(300).fadeOut(400); //ローディング画面をフェードアウトさせることでメインコンテンツを表示
});

// ページのロードが終わらなくても10秒たったら強制的に処理を実行
$(function(){ setTimeout('stopload()', 10000); });
function stopload(){
  $('#js-loader').delay(300).fadeOut(400); //ローディング画面をフェードアウトさせることでメインコンテンツを表示
}

('a[href ^= "https://v1.newstella.co.jp"]' + 'a[target != "_blank"]')だけ軽く触れておくと、リンクのURLがhttps://v1.newstella.co.jpから始まるもの、かつtarget="_blank"が設定されていないリンクの場合のみローディング画面を表示させるようにしています。

前者をそうする理由は外部サイトへのリンクや各種SNSのシェアボタンなどをクリックした際にローディング画面を表示させたくないため、後者については例え同一サイト内のリンクであっても新しいタブで開かせたい場合があると思いますがそういうときにローディング画面を表示させたくない(遷移先では表示させるけど遷移元のページでは表示させたくない)ため、です。

CSS

CSSは以下のようになります。
アニメーション部分のコードはSingle Element CSS Spinners から拝借しました。

/* ブラウザのスクロールバーを常に表示させることでカクカクッとなるのを防ぐ */
html{
  overflow-y:scroll;
}

/* ローディング関係ない部分のCSS */
.button{
  background:#222;
  border:1px solid #222;
  border-radius:5px;
  color:#fff;
  display:block;
  height:60px;
  line-height:60px;
  margin:30px auto;
  text-align:center;
  width:600px;
}
.button:hover{
  background:#fff;
  color:#222;
}
img{
  max-width:100%;
}

/* ローディングの背景部分のCSS */
.loader{
  background:#1bb;
  height:100%;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:10;
}

/* ローディングのアニメーション部分のCSS (https://projects.lukehaas.me/css-loaders/) */
.loader-animation,
.loader-animation:before,
.loader-animation:after {
  background:#ffffff;
  -webkit-animation:load1 1s infinite ease-in-out;
  animation:load1 1s infinite ease-in-out;
  width:1em;
  height:4em;
}
.loader-animation {
  height:10px;
  left:50%;
  margin:-5px 0 0 -5px;
  position:absolute;
  top:50%;
  width:10px;
  color:#ffffff;
  text-indent:-9999em;
  font-size:10px;
  -webkit-transform:translateZ(0);
  -ms-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-animation-delay:-0.16s;
  animation-delay:-0.16s;
}
.loader-animation:before,
.loader-animation:after {
  position:absolute;
  top:0;
  content:'';
}
.loader-animation:before {
  left:-1.5em;
  -webkit-animation-delay:-0.32s;
  animation-delay:-0.32s;
}
.loader-animation:after {
  left:1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow:0 0;
    height:4em;
  }
  40% {
    box-shadow:0 -2em;
    height:5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow:0 0;
    height:4em;
  }
  40% {
    box-shadow:0 -2em;
    height:5em;
  }
}

これでオッケーかと思います。

DEMO

CSSのコメント/* ローディングのアニメーション部分のCSS (https://projects.lukehaas.me/css-loaders/) */より下部分を変えてあげると、よりオリジナリティが出て良い感じになるのではないかと思います。

弊社ではSVGとCSS3のアニメーションを使ってローディングアイコンをグルグルさせているほか「Loading…」というテキストをゴニョゴニョさせたりしています。

少し古い記事ですがCSSやSVGで実装するローディングアニメーション 20＋α | NxWorld にて色々とローディングのアニメーションが紹介されていますし、そういった記事は検索すると沢山出てきます。

  • なんだこれー！！！

というようなアニメーションが天才な方々の手によって多数世に放たれているので、アイデアが思い浮かばない場合は参考にしてみると良いかもしれません。

制作実績を見る　無料見積・お問い合わせ


この記事を読んだ方は以下の関連記事も読んでいます

新着記事一覧

コメント一覧

  1. 今日(2017-11-23)調べたページたち | WebとWebサイトとWebログと
    （2017年11月23日 6:03 PM）

    […] | 尼崎市でWEB制作してます［s-oyama.me］ ページ遷移時のローディングアニメーションをjQueryとCSS3で実装する方法 | … WordPressで記事内の最初の画像をアイキャッチ代わりに使う方法 | […]

    返信

コメントを書き込む

スクロールしてページトップへ戻る

Loading...

ポップアップ画像