フォーム送信中に読み込み中アニメーションを表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

ローディング

フォーム送信中に読み込み中アニメーションを表示する方法

フォーム送信中に読み込み中アニメーションを表示する方法を紹介します。お問い合わせフォームやログインフォーム、会員登録フォームなどでは、送信ボタンを押してから処理が完了するまでに時間がかかる場合があります。その間に読み込み中アニメーションを表示することで、送信処理が実行中であることをユーザーへ分かりやすく伝えられます。

このサンプルでは、HTML・CSS・JavaScriptを使ってフォーム送信中に読み込み中アニメーションを表示する方法を紹介します。フォームの送信開始と同時にアニメーションを表示し、送信ボタンの連続クリックを防ぎながら処理中であることを視覚的に案内できます。特別なライブラリは使用せず、既存のフォームへ導入しやすいシンプルな構成になっています。

お問い合わせフォームや検索フォーム、ログインフォーム、会員登録フォームなど、送信処理に時間がかかるフォームで活用できます。送信中であることをユーザーへ分かりやすく伝えたい場合や、二重送信を防止したい場合にも便利なサンプルです。

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

デモ

送信ボタンを押すと、送信中だけ読み込み中アニメーションを表示します。
フォームの submit イベントで読み込み中表示を開始し、送信中はボタンを無効化します。

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

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

  <!-- フォーム -->
  <form class="form-submit-loading-animation_form" id="submitForm">

    <!-- 名前 -->
    <label class="form-submit-loading-animation_label" for="name">お名前</label>
    <input class="form-submit-loading-animation_input" id="name" type="text" value="山田 太郎">

    <!-- お問い合わせ内容 -->
    <label class="form-submit-loading-animation_label" for="message">お問い合わせ内容</label>
    <textarea class="form-submit-loading-animation_textarea" id="message">サンプルの送信内容です。</textarea>

    <!-- 送信ボタン -->
    <button class="form-submit-loading-animation_button" id="submitButton" type="submit">
      <span class="form-submit-loading-animation_loader"></span>
      <span id="submitButtonText">送信する</span>
    </button>

  </form>

  <!-- 送信状態のメッセージ -->
  <div class="form-submit-loading-animation_message" id="submitMessage">
    送信ボタンを押すと、送信中だけ読み込み中アニメーションを表示します。
  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにフォームや送信ボタンを配置し、CSSでフォームのデザインや読み込み中アニメーションの見た目を設定します。JavaScriptではフォームの送信開始を検知し、読み込み中アニメーションの表示や送信ボタンの無効化、送信完了後の表示切り替えを行います。 

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

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開くと動作を確認できます。送信ボタンを押すと読み込み中アニメーションが表示され、ボタンが一時的に無効化されます。実際のフォームへ組み込む場合は、デモ用の event.preventDefault() を削除し、送信完了時の処理へ合わせて読み込み中アニメーションを終了してください。ボタンの色やサイズ、アニメーションの回転速度はCSSから自由に変更できます。

コメント