全画面の読み込み中アニメーションを作る方法【HTML/CSS・サンプルコード付き】 

ローディング

全画面の読み込み中アニメーションを作る方法

全画面の読み込み中アニメーションを作る方法を紹介します。本記事では、HTMLとCSSを使って、画面全体を覆う読み込み中画面を作成します。ページの読み込み中や処理待ちの間に全画面でアニメーションを表示することで、ユーザーに待機中であることを分かりやすく伝えられます。

このサンプルコードでは、画面全体に半透明の背景を重ね、その中央に回転する読み込み中アニメーションとテキストを表示します。CSSの position:fixed; を使って画面全体に固定表示し、@keyframes を使ってアイコンを回転させています。JavaScriptを使わず、HTMLとCSSだけで実装できます。

全画面の読み込み中アニメーションは、ログイン処理中、ページ遷移中、データ読み込み中、フォーム送信中など、操作を一時的に待ってもらう場面で活用できます。必要に応じて背景色、アイコンサイズ、文字、アニメーション速度を変更することで、サイトのデザインに合わせてカスタマイズできます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

サンプル画面

この画面全体に読み込み中アニメーションを重ねて表示しています。

読み込み中…

position:absolute; と inset:0; を使うと、画面全体を覆う読み込み中表示を作成できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>全画面の読み込み中アニメーション</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- サンプル画面 -->
  <main class="fullscreen-loading-animation_content">
    <h1>サンプル画面</h1>
    <p>画面全体に読み込み中アニメーションを表示しています。</p>
  </main>

  <!-- 全画面の読み込み中表示 -->
  <div class="fullscreen-loading-animation_overlay">

    <!-- 回転する読み込み中アイコン -->
    <div class="fullscreen-loading-animation_loader"></div>

    <!-- 表示テキスト -->
    <p class="fullscreen-loading-animation_text">
      読み込み中...
    </p>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLにサンプル画面と全画面の読み込み中表示を配置し、CSSで画面全体を覆うオーバーレイと回転する読み込み中アニメーションを作成します。JavaScriptは使用せず、HTMLとCSSだけで実装できます。 

sample/
├── index.html
└── style.css

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。全画面の読み込み中表示は position:fixed; と inset:0; で画面全体に重ねています。背景色やアイコンサイズ、回転速度はCSSを変更することで調整できます。

コメント