3つのドットが動く読み込み中アニメーションを作る方法【HTML/CSS・サンプルコード付き】

ローディング

3つのドットが動く読み込み中アニメーションを作る方法

3つのドットが動く読み込み中アニメーションを作る方法を紹介します。本記事では、HTMLとCSSだけを使って、3つのドットが順番に動く読み込み中アニメーションを作成します。ページの読み込み中やデータ取得中など、処理が完了するまでの待機時間をユーザーへ分かりやすく伝えられるため、多くのWebサイトやWebアプリで利用されている定番のアニメーションです。JavaScriptを使用しないため、簡単に導入できます。

このサンプルコードでは、CSSアニメーションを利用して3つのドットを時間差で拡大・縮小させ、滑らかに動く読み込み中アニメーションを実装します。ドットの色や大きさ、間隔、アニメーション速度なども簡単に変更できるため、サイトデザインや用途に合わせて自由にカスタマイズできます。

このような読み込み中アニメーションは、ページの読み込み、画像の表示待ち、Ajax通信中、フォーム送信中など、さまざまな場面で活用されています。シンプルで軽量なアニメーションのため、幅広いWebサイトやWebアプリへ導入しやすいサンプルです。

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

デモ

読み込み中

3つのドットが順番に動く読み込み中アニメーションです。

animation-delay を使うと、複数のドットを時間差で動かせます。

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

<!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>

  <!-- 読み込み中表示エリア -->
  <div class="dot-loading-animation_wrap">

    <!-- ドットアニメーション -->
    <div class="dot-loading-animation_dots">
      <span class="dot-loading-animation_dot"></span>
      <span class="dot-loading-animation_dot"></span>
      <span class="dot-loading-animation_dot"></span>
    </div>

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

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLに3つのドットを配置し、CSSアニメーションで時間差を付けて動かすことで、読み込み中アニメーションを実装します。JavaScriptを使用しないため、シンプルな構成で手軽に導入できます。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。3つのドットが順番に拡大・縮小を繰り返し、読み込み中アニメーションが表示されます。ドットの色は background、大きさは width と height、動く速さは animation、動き始めるタイミングは animation-delay を変更することで自由にカスタマイズできます。

コメント