ボタン内に読み込み中アニメーションを表示する方法【HTML/CSS・サンプルコード付き】

ローディング

ボタン内に読み込み中アニメーションを表示する方法

ボタン内に読み込み中アニメーションを表示する方法を紹介します。送信ボタンや保存ボタン、検索ボタンなどをクリックした際に、ボタンの中へ読み込み中アニメーションを表示することで、処理が実行中であることをユーザーへ分かりやすく伝えられます。処理が完了するまでの待ち時間を視覚的に表現できるため、連続クリックの防止や操作状況の把握にも役立ちます。

このサンプルでは、HTMLと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>

  <!-- ボタン -->
  <button class="button-loading-animation_button" type="button">

    <!-- 読み込み中アニメーション -->
    <span class="button-loading-animation_loader"></span>

    <!-- ボタンの文字 -->
    <span>読み込み中</span>

  </button>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されています。HTMLにボタンと読み込み中アニメーションを配置し、CSSでボタンのデザインや読み込み中アニメーションの見た目、回転アニメーションを設定します。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開くと動作を確認できます。読み込み中アニメーションの回転速度は animation の時間を変更することで調整できます。また、ボタンの色やサイズ、アニメーションの大きさはCSSを書き換えるだけで簡単にカスタマイズできます。

コメント