フォームの送信ボタン、決済ページの確定ボタン、非同期処理を伴うアクションボタン——これらに「押した後、何も起きていないように見える」状態が続くと、ユーザーは不安になってもう一度押してしまいます。二重送信、重複処理、エラーへの連鎖。「ボタンにローディング状態を持たせる」だけで防げるトラブルが、現場では意外と多い。UXというより、もはや防御策のひとつです。
今回はCSSのみで実装したローディング付きボタンを5種類紹介します。JavaScriptは使っていないので、デモはそのままコピー可能です。WordPress（SWELL）にも貼り付けて使えます。実務での使い方はシンプルで、JavaScriptでボタンに .is-loading などのクラスを付け外しするだけ。たとえばこんなイメージです。
btn.addEventListener('click', () => {
btn.classList.add('is-loading');
fetch('/api/submit').finally(() => {
btn.classList.remove('is-loading');
});
});CSS側では .is-loading .btn-spin のようにクラスを組み合わせれば、ローディング状態の発動・解除を完全にJSに委ねられます。今回のデモはすべて「常にローディング状態を表示」していますが、実装への橋渡しとして参考にしてください。
Spin Border（スピン・ボーダー）
ローディングの「定番中の定番」とも言えるデザインです。ボタンのテキストを非表示にしつつ、中央に丸いスピナーが回転し続けます。::after 疑似要素にborder-top-colorだけを白にしたボーダーを置き、@keyframes で360度回転させる——実装はシンプルですが、ブラウザ互換性が高く実務での採用率ナンバーワンのスタイルだと思います。「これで十分じゃないか」と思えるくらい、主張が強すぎない丁度いい動きです。
See the Pen Spin Border by BaseKENT (@basekent) on CodePen.
調整方法
- スピナーのサイズ:
width: 22px; height: 22pxの数値を変えると大小を調整できます。marginの値もセットで変えてください（-(size/2)px）。 - 回転速度:
animation: btn-spin 0.7sの秒数を増やすとゆっくり、減らすと高速回転になります。 - ボタン色:
background: #3b82f6をプロジェクトのメインカラーに変えてください。
Dot Loader（ドット・ローダー）
3つの点が波打つように上下する、チャット系アプリの「入力中…」インジケーターでおなじみのスタイルです。::after 疑似要素1つでセンターの点を作り、box-shadow で左右に2つの点を追加。@keyframes で位置を変化させることで、3点が独立してアニメーションしているように見せています。LLMのレスポンス待ち画面や、AIが「考えている」状態の演出として組み込んでいる現場が最近増えています。「誰かが作業している感」を出すのに適したデザインです。
See the Pen Dot Loader by BaseKENT (@basekent) on CodePen.
調整方法
- ドット間隔:
box-shadow: -20px 0 0 #fff, 20px 0 0 #fffの20pxを変えると3点の間隔を調整できます。 - バウンスの高さ:
@keyframes内のtranslateY(-7px)の値を大きくすると跳ね幅が広がります。 - ドットカラー:
background: #fffとbox-shadowの色を同じ値に変えてください。
Progress Bar（プログレス・バー）
ボタン下部にバーが左から伸びていく、進捗を「棒グラフ的に」見せるデザインです。テキストは「Loading…」のまま表示され、処理の進行感を帯状に伝えます。ファイルアップロードやデータ送信のように「完了まで時間がかかる」ことが想定されるボタンに最適。::after の width を0%から100%へアニメーションさせるだけで実現できます。「いつ終わるか分からない」不安を「少しずつ進んでいる」安心に変えるデザイン、というと大げさですが、実際にユーザーテストで離脱が下がった経験があります。
See the Pen Progress Bar by BaseKENT (@basekent) on CodePen.
調整方法
- バーの高さ:
height: 4pxを6pxや3pxに変えると太さが変わります。 - アニメーション速度:
animation: btn-progress 1.8sの秒数で1サイクルの長さを調整できます。長くするとゆっくり伸びます。 - バーの色:
background: rgba(255, 255, 255, 0.8)の透明度（0.8）を下げると控えめな表示になります。
Pulse Ring（パルス・リング）
ボタンの外枠からリングが広がり、フェードアウトしていく脈動エフェクトです。生き物の「鼓動」や「呼吸」を想起させる動きで、「ここに注目してほしい」というトリガーとしても機能します。::before 疑似要素を同じ形・同じ色でボタンの外に重ね、scale と opacity をアニメーションさせるだけ。ローディングというより「アクションを促す」用途で使っても映えます。送信ボタンに常時アニメーションとして付けておく使い方もありです。
See the Pen Pulse Ring by BaseKENT (@basekent) on CodePen.
調整方法
- 広がりの大きさ:
@keyframes内のscale(1.5)の値を大きくすると、リングがより広い範囲まで広がります。1.2にすると控えめに。 - 繰り返し速度:
animation: btn-pulse 1.4sの秒数で脈動の間隔を調整できます。 - リングの色:
border: 2px solid #f59e0bの色をボタンのbackgroundと同じ値にするのが基本です。
Shimmer（シマー）
暗めの背景に光沢が左から右へ流れ続ける、スケルトンローディングのような静かな待機表現です。「無効化されたボタン」の雰囲気を保ちながら、動きで「何かをしている」ことをさりげなく伝えます。派手な動きを避けたいダーク系サイトや、ミニマルなUIとの相性が抜群。::after に細長いグラデーションを置き、左から右へ流すだけの軽量実装です。個人的には、SkeletonローディングとShimmerを組み合わせてページ全体のロード待ちを演出するのが好きで、このボタンはその流れで使うことが多いです。
See the Pen Shimmer by BaseKENT (@basekent) on CodePen.
調整方法
- 光の幅:
.btn-shimmer::afterのwidth: 60%を変えると光のサイズが変わります。細くしたい場合は30%程度に。 - 流れる速度:
animation: btn-shimmer 1.6sの秒数を短くするとすばやく流れます。 - 光の強度:
rgba(255, 255, 255, 0.08)の最後の数値（透明度）を上げると光がより目立ちます。0.15あたりが見やすいバランスです。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
