LAB

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

Written by EVOWORX

INDEX

説明

Webサイトのロード中にアニメーションを表示します。

手順

手順1

HTML要素を用意します。

ローダーのコンテナ、アニメーションさせる要素を作ります。

/＊ ローダーの要素 ＊/
<div id="js-loader" class="container">
 <div class="loader"></div> 
</div>

手順2

CSSで要素を以下の通りスタイリングします。

  1. コンテナ要素を画面幅いっぱいにする。
  2. 子要素であるローダーを中央揃えにする（中央揃えの方法に関してはお好みで構いません）。
  3. position: absoluteとz-indexを追加し、画面の一番手前に表示させる。
  4. ローダーは要素を円形にし、borderを利用して描画する。
  5. ローダー用の@keyframesアニメーションを用意する。
.container {
 background-color: #333;

  // 親要素を画面幅いっぱいにする
 width: 100vw;
 height: 100vh;

　　// 子要素を中央揃え
 display: grid;
 place-content: center;

　　// 要素を一番手前に表示
 position: absolute;
 z-index: 1;

　　// opacityをアニメーションさせる
 transition: opacity 1s ease;
}

.loader {
 border: 6px solid #f3f3f3;
 border-top: 6px solid #3d5aff;
 border-radius: 50%;
 width: 50px;
 height: 50px;
 animation: spin 2s linear infinite;
}

// ローダー用アニメーション
@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

手順3

次はJavaScriptでイベントの処理を記述していきます。

JavaScriptでは以下の処理を行います。

  1. 表示3秒後にopacityを0にする。
  2. 要素のopacityが0になった時点で、要素を取り除く。
// ローダーのコンテナ要素を取得
const loader = document.getElementById("js-loader");

// 3秒後にopacityを0にする
setTimeout(() => {
 loader.style.opacity = 0;
}, 3000);

// アニメーションが終わると、要素を取り除く
loader.addEventListener("transitionend", () => {
 loader.remove();
});

サンプル

参考

PICK UP