フォームの送信ボタンを押した後、何も起きない時間が1秒続くだけで「あれ、送れたのかな」と不安になります。その1秒のUXを変えるのが、プログレスバー付きボタンです。送信中・ロード中・アップロード中——「今、処理が進んでいる」という視覚的なフィードバックがあるだけで、ユーザーの不安感がゼロに近づきます。デザインとしての面白さもあって、ボタン内部にバーが広がる・走査線が往復する・縞模様が流れるといった動きは、押した瞬間から目が離せません。
この記事では、CSSだけで作るプログレスバー付きボタンを5パターン紹介します。基本的な左から塗りつぶしからGPU最適化版・グラデーションライン・走査スキャン・縞模様ローダーまで、用途によって使い分けられる構成です。JavaScriptは一切使わず、コピペしてすぐ動くコードをまとめています。
Fill Progress（フィル・プログレス）
ボタン内部が左から右に塗りつぶされる、プログレスバーの最も分かりやすい形です。::after 疑似要素に width: 0 から width: 100% へのアニメーションを設定し、ボタン本体に overflow: hidden を指定することで、バーがボタン内に収まります。塗りが進む速さと最終状態での色変化で「処理が完了した」感を演出できます。
背景をライトグレーにして、バーが青く入ってくるシンプルな配色にしています。問い合わせフォームの送信ボタン・会員登録フォームのボタンなど、日常的なWebフォームに素直に馴染むデザインです。JavaScriptで実際の送信完了をトリガーにして、このアニメーションをクラスの付け外しで制御するパターンとも組み合わせやすい設計になっています。
See the Pen Fill Progress by BaseKENT (@basekent) on CodePen.
調整方法
- バーの色:
background: #3b82f6を変えます。ブランドカラーのアクセント色を指定すると、フォームのデザインに統一感が出ます - 完了までの時間:
animation: fillProgress 3sの3sを変えます。実際のフォーム送信時間に合わせると体感と動きがズレません - 角丸:
border-radius: 8pxをボタン本体と::afterで揃えることで、バーがはみ出さずに角を追います
Scale Fill（スケール・フィル）
transform: scaleX(0 → 1) でバーを展開する、GPU最適化版の塗りつぶしアニメーションです。width アニメーションと見た目は似ていますが、transform はブラウザがGPUで処理するため、複数のアニメーションが同時に走るページでも60fpsを維持しやすい利点があります。transform-origin: left center を指定することで、左端を起点に右に向かって広がります。
ダーク系の背景に合わせて、#1e293b のダークスレートにインディゴ（#6366f1）のバーが入る配色にしています。SaaSのダッシュボードやWebアプリのUIに馴染む雰囲気です。cubic-bezier(0.4, 0, 0.2, 1) の加速カーブはMaterial Designのstandard easeで、素早く始まってゆっくり終わる自然な動きになっています。
See the Pen Scale Fill by BaseKENT (@basekent) on CodePen.
調整方法
- 加速カーブ:
cubic-bezier(0.4, 0, 0.2, 1)をlinearにすると機械的な一定速度に、ease-inにすると最後に一気に終わる演出になります - バーの色:
background: #6366f1を変えます。ダーク背景では彩度が高めの色のほうが見やすくなります - 起点の変更:
transform-origin: left centerをright centerにすると、右から左に向かって広がる逆方向になります
Gradient Bar（グラデーション・バー）
ボタン下部に3色グラデーションのラインが引かれるパターンです。::before 疑似要素を高さ 3px で設置し、background: linear-gradient(90deg, #3b82f6, #a855f7, #ec4899) の3色グラデーションを塗りながら width が伸びていきます。塗りつぶし系と違い、ボタン本体の色はそのままでラインだけが動くため、派手さと上品さのバランスが取れた演出になります。
ダーク背景のサービス紹介ページや、クリエイター向けポートフォリオサイトとの相性が特に良いパターンです。グラデーションに使う色の組み合わせを変えれば、サイトのトーンに合わせた印象になります。ボタン下部にラインが走る動きは、テキストのアンダーラインアニメーションの発展系として捉えることもでき、「進捗表示」以外にも「ホバー時にラインが引かれる」インタラクションとしても使えます。
See the Pen Gradient Bar by BaseKENT (@basekent) on CodePen.
調整方法
- ラインの太さ:
height: 3pxを変えます。5pxにするとより主張が強くなり、2pxにすると繊細な印象になります - グラデーション:
#3b82f6, #a855f7, #ec4899の3色を変えます。2色にするとスッキリし、4色以上にすると虹のようなカラフルさになります - 位置の変更:
bottom: 0をtop: 0にするとボタン上部にラインが引かれます
Indeterminate Scan（インデタミネート・スキャン）
光の走査線がボタン内を左から右に通り抜け続けるパターンです。translateX(-60% → 110%) のループアニメーションで、光の帯がボタン外から入って外へ抜けていく動きを作っています。「処理時間が未確定のとき」——例えばAPIレスポンスを待っている間、ファイル変換中、アップロード先のサーバーとやりとりしている間——に使うと意味が合致します。
repeating-linear-gradient を使わず、幅50%の帯に透明なフェードをかけた光の演出です。左端・中央・右端を透明→色→透明のグラデーションにすることで、帯の縁がなめらかに滑ります。ダーク背景にエメラルドグリーン（rgba(16, 185, 129, 0.4)）の光を設定しているので、「処理中」のシステム的な雰囲気が出ます。
See the Pen Indeterminate Scan by BaseKENT (@basekent) on CodePen.
調整方法
- 速度:
animation: indeterminateScan 1.6sを短くするほどテキパキとした印象に、長くするとゆっくりスキャンする雰囲気になります。1s以下にするとかなりせわしない印象になります - 光の幅:
width: 50%を30%にすると細い光線になり、70%にすると広い面積が光ります - 光の色:
rgba(16, 185, 129, 0.4)の色部分を変えます。透明度（最後の0.4）を上げると光が強くなります
Striped Loader（ストライプド・ローダー）
斜め縞模様がボタン内を流れ続けるパターンです。repeating-linear-gradient(-45deg, ...) で斜めストライプを作り、background-position のアニメーションでその模様を流します。工事現場の警告テープやDTM・動画編集ソフトの処理中バーでよく見かける、「作業中」「処理中」のビジュアル言語をCSSで再現しています。
アンバー（#f59e0b）のボタンに白いストライプが流れる組み合わせは、視認性が高く「何かが動いている」と即座に伝わります。ファイルアップロードのプログレス・一括処理の実行中・バッチ操作の待機画面など、「明らかに時間がかかる処理」に使うとユーザーへのフィードバックとして機能します。縞模様のピッチ・角度・色を変えると印象が大きく変わるので、サイトのトーンに合わせた調整の余地が広い点も使いやすさのひとつです。
See the Pen Striped Loader by BaseKENT (@basekent) on CodePen.
調整方法
- 縞の間隔:
transparent 8px, rgba(255,255,255,0.2) 8px, rgba(255,255,255,0.2) 16pxの数値を変えます。8px → 4px、16px → 8pxのように比率を保ったまま小さくすると細かい縞になります - 流れる速さ:
animation: stripedLoader 1s linearの1sを短くすると縞が速く流れます。0.5sでかなり高速に、2sでゆっくり流れます - 縞の角度:
-45degを45degに変えると縞の傾き方向が変わります。-60degにするとより急な斜め、-30degにするとゆるやかな傾きになります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
