CSSで作るロード画面の作り方と使い方！初心者向け徹底解説、サンプルコード付き

CSSを使ったロード画面のサンプルCSS
2024.01.31
この記事は約8分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

ウェブサイトを閲覧していると、画面が読み込まれるまでに少し時間がかかることがあります。

このとき、何も表示されないと待ち時間が長く感じられてしまいます。

そのため、多くのウェブサイトではロード画面を表示することが一般的になっています。

本記事では、CSSを使ったロード画面の作り方と使い方について、初心者向けに詳しく解説します。

●CSSでロード画面を作るために必要な知識

CSSでロード画面を作るためには、まずCSSの基礎的な知識が必要になります。

下記のような知識があることが望ましいです。

これらの知識がない場合は、まずCSSの基礎を学習してから本記事を読み進めることをおすすめします。

●CSSでロード画面を作る方法

CSSでロード画面を作る方法は、簡単に言うと次の3つのステップに分かれます。

  1. ロード画面のHTMLを作成する
  2. ロード画面のスタイルをCSSで指定する
  3. ロード画面を表示するJavaScriptを実装する

これらのステップを順に解説していきます。

【Step 1】ロード画面のHTMLを作成する

ロード画面のHTMLを作成するために、まずはdivタグを用意します。

<div class="loader-wrapper">
  <div class="loader"></div>
</div>

上記のコードは、ロード画面を囲むdiv要素と、ロード画面のアニメーションを表示するdiv要素を作成しています。

ここで、loader-wrapperクラスはロード画面を囲む親要素のクラスであり、loaderクラスはアニメーションを表示する子要素のクラスです。

【Step 2】ロード画面のスタイルをCSSで指定する

次に、ロード画面のスタイルをCSSで指定します。

次のようなCSSを用意します。

.loader-wrapper {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

上記のコードでは、loader-wrapperクラスには次のスタイルが指定されています。

  • position: fixed; → 画面を固定する
  • z-index: 9999; → 表示優先度を指定する
  • width: 100%; height: 100%; → 画面全体に表示する
  • top: 0; left: 0; → 左上から表示する
  • background-color: #fff; → 背景色を白に指定する
  • display: flex; justify-content: center; align-items: center; → 中央に表示するために、flexboxを使用する

また、loaderクラスには次のスタイルが指定されています。

  • border: 16px solid #f3f3f3; → 白い枠線を指定する
  • border-top: 16px solid #3498db; → 青い枠線を指定する
  • border-radius: 50%; → 丸くする
  • width: 120px; height: 120px; → サイズを指定する
  • animation: spin 2s linear infinite; → アニメーションを指定する

最後に、@keyframesでspinというアニメーションを定義しています。

このアニメーションでは、0%の時点ではdiv要素が回転していない状態、100%の時点では360度回転している状態になります。

【Step 3】ロード画面を表示するJavaScriptを実装する

最後に、ロード画面を表示するJavaScriptを実装します。

下記のようなコードを用意します。

window.addEventListener('load', function () {
  const loader = document.querySelector('.loader-wrapper');
  loader.classList.add('hide');
});

上記のコードでは、ページの読み込みが完了した時点でロード画面を非表示にするようにしています。

具体的には、loader-wrapperクラスの要素を取得して、hideクラスを追加することで非表示にしています。

以上が、CSSを使ったロード画面の作り方です。

●CSSで作ったロード画面の応用例

ここでは、実際にCSSで作ったロード画面の応用例をいくつか紹介します。

【応用例1】ロード画面にテキストを追加する

ロード画面にテキストを追加する場合は、HTMLに次のように記述します。

<div class="loader-wrapper">
  <div class="loader"></div>
  <div class="text">Now Loading...</div>
</div>

また、CSSでは次のようにスタイルを指定します。

.text {
  font-size: 24px;
  font-weight: bold;
  margin-top: 16px;
}

【応用例2】ロード画面の背景色を変える

ロード画面の背景色を変える場合は、CSSでbackground-colorプロパティを変更します。

例えば、次のように指定することで、背景色をグレーに変更できます。

.loader-wrapper {
  background-color: #ddd;
}

【応用例3】ロード画面にロゴを追加する

ロード画面にロゴを追加する場合は、HTMLに次のように記述します。

<div class="loader-wrapper">
  <div class="loader"></div>
  <div class="logo">
    <img src="logo.png" alt="ロゴ">
  </div>
</div>

また、CSSでは次のようにスタイルを指定します。

.logo {
  margin-top: 16px;
}

.logo img {
  width: 120px;
  height: 120px;
}

【応用例4】ロード画面のアニメーションを変更する

ロード画面のアニメーションを変更する場合は、CSSで@keyframesを変更します。

例えば、次のように指定することで、アニメーションが拡大・縮小するものに変更できます。

@keyframes spin {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

●CSSで作ったロード画面の対処法

CSSで作ったロード画面が表示されない場合は、次のような対処法があります。

【対処法1】CSSファイルを読み込んでいるか確認する

ロード画面のCSSファイルが正しく読み込まれているか確認してください。

HTMLファイル内で、次のようにCSSファイルを読み込んでいるか確認してください。

<head>
  <link rel="stylesheet" href="path/to/loader.css">
</head>

CSSファイルのパスが正しいかも確認した方が良さそうです。

【対処法2】クラス名が正しく指定されているか確認する

HTMLファイルとCSSファイルのクラス名が一致しているか確認してください。

例えば、loader-wrapperクラスがHTMLファイル内に存在しない場合、ロード画面は表示されません。

【対処法3】JavaScriptの記述が正しいか確認する

JavaScriptの記述が誤っている場合、ロード画面が表示されないことがあります。

JavaScriptを実装する場合は、コードの記述に注意してください。

以上が、CSSを使ったロード画面の対処法です。

まとめ

本記事では、CSSを使ったロード画面の作り方と使い方について、初心者向けに詳しく解説しました。

CSSでロード画面を作るためには、HTML、CSS、JavaScriptの基礎的な知識が必要です。

また、CSSを使ったロード画面の応用例や、ロード画面が表示されない場合の対処法についても解説しました。

CSSを使って、見栄えの良いロード画面を実装してみてください。