ページ読み込み中に表示するスケルトンローダーの実装方法【CSS】

この記事では、スケルトンローダーの概要と実装する方法について解説します。

スケルトンローダーCSSの概要

スケルトンローダーは、ウェブサイトのパフォーマンスを向上させるためのテクニックの一つです。

ウェブページの読み込み中処理を実装していない場合、ユーザーには何も表示されないか、一時的な空白が表示されてしまいます。これは、ユーザーが何が起こっているのかを理解できない上に、ストレスを感じさせる要因となります。しかし、スケルトンローダーを実装して、ページの読み込み待ち時間に視覚的な代替デザインを表示することで、ユーザーに読み込み進行中であることを伝えることができます。

スケルトンローダーCSSの実装方法

スケルトンローダーは、以下の手順で実装できます。

2.1 HTMLの構造を設計する

スケルトンローダーを表示するためには、まずHTMLの構造を適切に設計する必要があります。主要なコンテンツエリアに対応する要素には、<div>などの適切なHTMLタグを使用します。

2.2 CSSを追加する

次に、スケルトンローダーのスタイルを定義するためのCSSを追加します。以下は、基本的なスケルトンローダーのCSSコードの例です。

.skeleton-loader {
  background-color: #f3f3f3;
  animation: skeleton-loading 1s infinite ease-in-out;
}

@keyframes skeleton-loading {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

この例では、背景色を設定し、アニメーションを適用しています。アニメーションには、要素の不透明度を変化させるキーフレームを使用しています。

2.3 JavaScriptを使用して適用する

最後に、JavaScriptを使用してスケルトンローダーを実際に適用します。JavaScriptを使用することで、ページの読み込み状態を監視し、必要なタイミングでスケルトンローダーを表示・非表示にすることができます。以下は、基本的なJavaScriptコードの例です。

window.addEventListener('load', function() {
  // ページの読み込みが完了したらスケルトンローダーを非表示にする
  document.querySelector('.skeleton-loader').classList.add('hidden');
});

この例では、loadイベントを使用してページの読み込み完了を監視し、スケルトンローダーを非表示にする処理を行っています。