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

ローディング

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

読み込み中アニメーションを作る方法を紹介します。本記事では、HTMLとCSSだけを使って、シンプルな読み込み中アニメーションを作成する方法を解説します。ページの表示中やデータの取得中など、処理が完了するまでの待機時間をユーザーへ分かりやすく伝えられるため、WebサイトやWebアプリでよく利用されている表現です。JavaScriptを使用せずに実装できるため、さまざまな場面へ手軽に導入できます。

このサンプルコードでは、CSSアニメーションを利用して円形のローディングアイコンを滑らかに回転させます。色やサイズ、回転速度を変更するだけでサイトデザインに合わせたアレンジも簡単に行えます。HTMLとCSSだけで構成されているため、仕組みを理解しながらカスタマイズしやすいのも特徴です。

このような読み込み中アニメーションは、ページの読み込み、画像の表示待ち、Ajax通信中、フォーム送信中など、さまざまな場面で活用されています。基本的な実装方法を覚えておくことで、ドット型やバー型、スケルトンローディングなど、さまざまなローディングアニメーションへ応用することもできます。

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

デモ

読み込み中

CSSアニメーションでローディングアイコンを回転させています。

@keyframes と animation を使うと、CSSだけでローディングアニメーションを作成できます。

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

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

    <!-- ローディングアイコン -->
    <div class="loading-animation_loader"></div>

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

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLに読み込み中アニメーションを表示する要素を配置し、CSSで円形のローディングアニメーションを作成します。CSSアニメーションのみで動作するため、JavaScriptを使用せずに実装できます。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。読み込み中アニメーションはページ表示と同時に自動で回転します。色は border-top-color、サイズは width と height、回転速度は animation の時間を変更することで簡単にカスタマイズできます。

コメント