送信中ローダー内蔵ボタン
クリックすると、ボタンの中で スピナーが回り始めて「送信中」を表現する ボタンです。ラベルとスピナーの 2 要素を内包し、JavaScript でクリック時に is-loading クラスを付与。CSS 側でラベルを display:none に、スピナーを表示に切り替えます。
解説
クリックすると、ボタンの中でスピナーが回り始めて「送信中」を表現するボタンです。ラベルとスピナーの 2 要素を内包し、JavaScript でクリック時に is-loading クラスを付与。CSS 側でラベルを display:none に、スピナーを表示に切り替えます。スピナーは border-top-color だけ色を変えた円を @keyframes で rotate(360deg) し続けることで回転させています。同時に disabled を立てて二重送信を防ぐのもポイントです。
向いている場面
- お問い合わせや申込フォームの送信ボタン
- ログインやサインアップなど、処理に少し時間がかかる操作
- 決済や予約など、二度押しを避けたい重要アクション
サンプルでは setTimeout で 2.2 秒後に元へ戻していますが、実運用では通信が完了したタイミングで is-loading を外し disabled を解除してください。注意点として、待ち状態は見た目だけでなく disabled で操作も止めること。スクリーンリーダー向けに状態変化を伝える配慮もあると親切です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
ローディングを実際の通信に合わせるには
サンプルの setTimeout は擬似的な待ち時間です。実際は fetch などの送信処理が完了した時点で is-loading クラスを外し、disabled を false に戻すように差し替えてください。
二重送信は防げますか
防げます。クリック時に disabled を true にして処理が終わるまでボタンを無効化しているため、待ち時間中の連打や二重送信を抑えられます。完了後に必ず解除する点だけ注意してください。