ダウンロード進捗バー内蔵ボタン
このボタンは、クリック後に内部が左から右へ塗りつぶされ、ダウンロードや送信の進み具合を見せる進捗バー内蔵ボタンです。仕組みは、ラベルを z-index:2 で前面に、進捗バー .dl-btn__bar を z-index:1 で背面に重ね、 overflow:hidden でバーをボタン内に収めています。
解説
このボタンは、クリック後に内部が左から右へ塗りつぶされ、ダウンロードや送信の進み具合を見せる進捗バー内蔵ボタンです。仕組みは、ラベルを z-index:2 で前面に、進捗バー .dl-btn__bar を z-index:1 で背面に重ね、overflow:hidden でバーをボタン内に収めています。JavaScript がクリックで setInterval を回し、バーの width を 10% ずつ増やしながらラベルの数値も更新、100% に達すると緑(#34c759)で完了表示に切り替えます。二重起動を防ぐため処理中は is-busy クラスで再クリックを無視します。
使う場面
- ファイルのダウンロードや書き出しの進行表示
- フォーム送信・アップロードなど待ち時間がある操作のフィードバック
- 「押したら何か起きている」ことを伝えたい重い処理
このデモはタイマーで擬似的に進めていますが、実際は通信の進捗イベントに bar.style.width を連動させると本物の進捗になります。バーの色は .dl-btn__bar の background、完了色は is-done 側で変えられます。速度は setInterval の間隔と増分で調整します。進捗中も操作内容が伝わるよう、状態変化をテキストでも示すとアクセシビリティ上ていねいです。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
実際の通信の進捗に連動させられますか？
できます。デモはタイマーで擬似的に進めていますが、実際の通信では受信量に応じて bar.style.width に割合を代入すれば本物の進捗バーになります。fetch や XMLHttpRequest の進捗イベントと組み合わせてください。
進捗バーの色や速度を変えたいです。
バーの色は .dl-btn__bar の background、完了時の色は is-done の指定で変えられます。進む速さは JavaScript の setInterval の間隔と、一回あたりの増分(初期 10%)で調整します。