点が横に流れる読み込み中アニメーションを作る方法【HTML/CSS・サンプルコード付き】

ローディング

点が横に流れる読み込み中アニメーションを作る方法

点が横に流れる読み込み中アニメーションを作る方法を紹介します。複数の点が一定の間隔で横へ流れるように動くことで、現在処理中であることを分かりやすく伝えられる読み込み中表示です。シンプルで見やすいデザインのため、WebサイトやWebアプリなど、さまざまな場面で利用されています。

このサンプルでは、HTMLとCSSだけを使って、点が横方向へ順番に流れる読み込み中アニメーションを作成します。CSSの animation と @keyframes を利用し、各点のアニメーション開始時間を少しずつずらすことで、滑らかに流れるような動きを実現しています。JavaScriptを使用しないため、そのまま導入しやすい構成です。

ページ読み込み中やデータ取得中、ボタン内の待機表示など、ユーザーへ処理中であることを自然に伝えたい場面で活用できます。点の数や色、大きさ、流れる速度はCSSから自由に変更できるため、サイトのデザインに合わせてカスタマイズしやすいサンプルです。

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

デモ

読み込み中…

translateX() と 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="moving-dot-loading-animation_wrap">

    <!-- 横に流れる点 -->
    <div class="moving-dot-loading-animation_loader">
      <span class="moving-dot-loading-animation_dot"></span>
      <span class="moving-dot-loading-animation_dot"></span>
      <span class="moving-dot-loading-animation_dot"></span>
      <span class="moving-dot-loading-animation_dot"></span>
      <span class="moving-dot-loading-animation_dot"></span>
    </div>

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

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されています。HTMLに読み込み中アニメーションを配置し、CSSで点のデザインや横へ流れるアニメーションを設定します。複数の点へ少しずつ異なるアニメーション開始時間を設定することで、点が順番に左から右へ流れる動きを表現しています。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開くと動作を確認できます。複数の点が左から右へ順番に流れる読み込み中アニメーションを繰り返します。点の数や色、大きさ、間隔、移動距離、アニメーション速度はCSSから自由に変更できます。

コメント