押すとスピナーが回り「保存中…」に変わるボタン。二重送信を防ぎ、aria-busyで処理中であることを支援技術にも伝えます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
ローディング中は is-loading クラスで opacity を下げ、pointer-events: none で連打（二重送信）を防ぎます。スピナーは border の一辺だけ色を変えた円を回転させる定番の作りです。disabled 属性ではなく aria-busy を使うのは、disabled にするとフォーカスが外れてしまうためです。動きを減らす設定のユーザーには回転を止め、文言と薄化だけで状態を伝えます。
フォーム送信ボタンの場合も type="button" でJS側から送信を制御すると、状態管理が単純になります。
クリックするとスピナーが表示され「保存中…」になるローディング状態付きボタンを作ってください。aria-busyの付与、pointer-eventsでの二重送信防止、prefers-reduced-motionでアニメーション停止も含めてください。