JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

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

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.classList.add()でローディングアニメーション

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.classList.add()

JavaScriptの.classList.add()でローディングアニメーション

JavaScriptの.classList.add()でローディングアニメーション

ページ切り替え時のローディングアニメーションは、CSSでアニメーションの見た目を整えて、JavaScriptで発火のタイミングを指定します。

これらは結構簡単な記述でできます。

そんなローディングアニメーションの作り方について、順に解説していきます。

.classList.add()

JavaScriptの .classList.add() は、要素に対してclassの追加を行うメソッドです。

element.classList.add(クラス名);

この記事では、ウィンドウ読み込み時にこのメソッドでclassを付与してローディングアニメーションを表示させます。

もう1回ローディングアニメーションサンプルを見るボタン

早速サンプルですが、既にこのページをご覧いただいた場合には既に表示されたと思います。

ですがもう一回見たい場合用に、以下のボタンで再度見ることができます。

サンプルのコード

コードはHTML・CSS・JavaScriptの3種です。それぞれ順に解説していきます。

HTML

HTMLは以下のような簡素なコードで、これを設置したいページのどこかに設置します。

<div id="loading">
    <div class="loader"></div>
</div>

HTMLで設置する場所はどこでも大丈夫ですが、極力「頭」の方に記述した方が構文的には正しいと思います。

JavaScript

JavaScriptは、window.onload でウィンドウが読み込まれ始めたタイミングで、.getElementById() で取得したidを持つ要素に .classList.add で「loaded」のclassを付与します。

// ページ読み込み時クラス変更
window.onload = function () {
    const spinner = document.getElementById('loading');
    spinner.classList.add('loaded');
}

動作はこれだけなので、class付与で記述したCSSのアニメーションで動かしていきます。

CSS

CSSは記述量が多少多いですが、大きく分けると「ローディング中のデザイン」と「ローディング中のアニメーション」の2つです。

/* ベースの本体 */
#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #f0db40;
  transition: all 1s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
#loading.loaded {
  opacity: 0;
  visibility: hidden;
}

/* ローディングアニメーション */
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #545454;
  transform: translateZ(0);
  animation: loadAnime 1.1s infinite linear;
}

@keyframes loadAnime {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

ローディング中に表示される「円」は、border プロパティで丸を作って、それを @keyframes でグルグルと360°回します。

おまけのJavaScript:ボタンでもう1回アニメーションさせる時

あまり実用的なスニペットじゃありませんが、おまけ的にボタンクリックトリガーのJavaScriptのコードも解説します。

このページで「もう1回アニメーション」のボタンで見る場合、アニメーションがクリック発火します。

ボタンクリック前に window.onload で付与されたclass名を削除してから、もう一回同じclass名を付け直す為にタイマーを設定する setTimeout() のメソッドを使い、再度アニメーションが表示されます。

document.getElementById('loadReload').addEventListener('click', () => {
    const spinner = document.getElementById('loading');
    spinner.classList.remove('loaded');
setTimeout(function () {
    spinner.classList.add('loaded');
  }, 2000);
});
かかかず
かかかず

このコードでは、2秒後のタイマーで設定しています。