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

ローディング

脈打つ読み込み中アニメーションを作る方法

脈打つ読み込み中アニメーションを作る方法を紹介します。円が一定間隔でふんわり広がる動きを繰り返すことで、現在処理中であることをユーザーへ自然に伝えられます。回転する読み込み中アニメーションとは異なるやわらかな印象を与えられるため、シンプルなWebサイトやアプリの読み込み中表示にもよく利用されています。

このサンプルでは、HTMLとCSSだけを使って、中央の円から波紋のように広がる脈打つ読み込み中アニメーションを作成します。JavaScriptを使用しないため導入しやすく、色やサイズ、脈打つ速さもCSSを書き換えるだけで簡単に調整できます。また、このような表現は「パルスアニメーション」と呼ばれることもあります。

ページ読み込み中やデータ取得中、画面切り替え時など、処理待ちを分かりやすく表示したい場面で活用できます。シンプルで目立ちすぎない読み込み中アニメーションを導入したい方や、サイトの雰囲気に合わせてカスタマイズしやすいサンプルを探している方にもおすすめです。

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

デモ

読み込み中…

円がふんわり広がる読み込み中アニメーションです。

scale() と opacity を使い、円が外側へ広がって消えるように見せています。

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

<!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="pulsing-loading-animation_wrap">

    <!-- 脈打つ円 -->
    <div class="pulsing-loading-animation_loader">
      <span class="pulsing-loading-animation_ring"></span>
      <span class="pulsing-loading-animation_ring"></span>
      <span class="pulsing-loading-animation_dot"></span>
    </div>

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

    <p class="pulsing-loading-animation_subtext">
      円がふんわり広がる読み込み中アニメーションです。
    </p>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されています。HTMLに読み込み中アニメーションを配置し、CSSで円が脈打つアニメーションや色、大きさ、表示テキストのデザインを設定します。JavaScriptを使用しないため、HTMLとCSSだけで簡単に導入できます。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開くと動作を確認できます。円が一定間隔で脈打つようにアニメーションを繰り返します。円の色やサイズ、広がる大きさ、アニメーション速度はCSSから自由に変更できるため、サイトのデザインに合わせてカスタマイズできます。

コメント