ボタンの周囲を円形のリングが取り囲み、読み込み中・カウントダウン・進捗を表現する——そんなUIがCSSだけで作れます。conic-gradient を使えば円グラフのように塗られる扇形を作れて、@property でその角度をアニメーションさせることができます。SaaSのダッシュボード・アプリのCTA・ゲーム系UIで「ただのボタンと一線を画したい」というシーンに向いているデザインです。
全5デモ、JavaScriptは不要。@property を使う「Fill Circle」と「Countdown Ring」はChrome 85+・Firefox 128+・Safari 16.4+以降で動作します（非対応ブラウザではアニメーションなしの静的表示にフォールバックします）。「Ring Loader」「Pulse Ring」「Dual Ring」は@property不使用で幅広く動きます。ローディングリング・ホバーで円が塗られる・カウントダウン・波紋パルス・2重逆回転リングと、用途ごとに選べる5選です。
Ring Loader（リング・ローダー）
ボタンの外周に途切れた弧が回転し続けるローディングリングです。border の一辺だけに色をつけて rotate(360deg) でスピンさせるシンプルな実装で、::before 擬似要素だけで完結します。「処理中」「送信中」の状態をボタン単体で表現したいときの定番パターンです。
背景にダークカラーを置くと、細い光の弧が際立ちます。グレーの下敷きリングに青い弧が走る今回のデザインは、ダッシュボード系・ツール系UIとの相性がとくに良いものです。
See the Pen Ring Loader by BaseKENT (@basekent) on CodePen.
調整方法
- 回転速度:
animation: spin 1.2sの秒数を変えると回転の速さが変わります。0.8sにすると素早く、2sにするとゆっくりに - 弧の太さ:
border: 4pxを変えると線の太さが変わります。6pxにするとより存在感のある弧になります - 弧の色:
border-top-color: #3b82f6を変えると弧の色が変わります。背景リングのborder: 4px solid #334155も合わせて調整すると統一感が出ます
Fill Circle（フィル・サークル）
通常時は一部だけ塗られたプログレスリング、ホバーすると円が360度まで埋まるデザインです。conic-gradient で扇形を描き、radial-gradient の白い円で中央を抜いてドーナツ型に見せています。@property で --fill-angle をCSS変数として定義することで、conic-gradient の角度値に transition が効くようになります——これが今回のデザインのポイントです。
通常のCSS変数（var()）はグラデーションの値のアニメーションに対応していませんが、@property で型宣言することで補間が可能になります。
See the Pen Fill Circle by BaseKENT (@basekent) on CodePen.
調整方法
- 初期の塗り量:
--fill-angle: 30degを変えると、デフォルト状態でどれだけ塗られているかが変わります。90degなら1/4、180degなら半円になります - アニメーション速度:
transition: --fill-angle 0.8s easeの秒数を変えると、塗られるスピードが変わります - リングの厚さ:
radial-gradientの46pxを変えると中央の白い円のサイズが変わります。小さくするとリングが太くなります
Countdown Ring（カウントダウン・リング）
プログレスリングが360度から0度へ自動的に縮んでいくカウントダウン演出です。@property で --countdown を <angle> 型として定義し、@keyframes で 360deg → 0deg へアニメーションさせています。「5秒後に自動送信」「制限時間内に操作を」といった時間的プレッシャーをビジュアルで伝えるのに向いています。
ループ再生されるため、単体で置いて「常時カウント中」の演出としても成立します。コード量は少ないですが、見た目の情報量が多く、ページのアクセント要素として機能します。
See the Pen Countdown Ring by BaseKENT (@basekent) on CodePen.
調整方法
- 1周の時間:
animation: countdown 4sの秒数を変えるとカウントダウンの長さが変わります。10sにすると10秒かけてゆっくり縮みます - 色:
conic-gradientの#f43f5e（ローズ）を変えると演出のトーンが変わります。緑系にすると「進捗」、赤系にすると「残り時間」の印象になります - ループしない版:
animation-iteration-count: 1を加えると、1回だけ再生して止まります
Pulse Ring（パルス・リング）
ボタンから波紋が広がり続けるパルスアニメーションです。::before と ::after の2つの擬似要素を同じ形状で重ねて、それぞれ animation-delay をずらすことで、波が連続して出ているような視覚を作っています。CTAボタンに「今すぐ押してほしい」という注意を引く演出として機能します。
動きが常に続くため、ページ内で目立たせたいボタンが1つの場合に向いています。複数置くと視線が散ってしまうので、メインCTAひとつに絞って使うのが効果的です。
See the Pen Pulse Ring by BaseKENT (@basekent) on CodePen.
調整方法
- 波の広がり量:
transform: scale(1.7)の値を大きくすると、より広い範囲まで波紋が広がります - 波の間隔:
animation-delay: 1.2sを短くすると波が連続して出てきます。animation: pulse-out 2.4sの秒数と合わせて調整してください - ボタン形状:
border-radius: 50pxのピル型ボタンですが、50%にすると円形ボタンになり、波紋の形も円になります
Dual Ring（デュアル・リング）
内側と外側の2つのリングが逆方向に回り続けるデザインです。::before が内側を時計回り、::after が外側を反時計回りにスピンしています。それぞれ異なる速度で回ることで、2つのリングが交差するように見える瞬間が生まれ、機械的でリッチな印象を与えます。
ローディング演出として使うなら、処理の「複雑さ・重厚さ」を視覚的に伝えるのに向いています。単純なスピナーよりも「何か高度なことが動いている」という雰囲気が出ます。2本のリングが互いを追いかけて、止まることなく回り続ける——そのループが、このデザインの一番の見どころです。
See the Pen Dual Ring by BaseKENT (@basekent) on CodePen.
調整方法
- 各リングの速度:
1.4sと2sの数値を変えると、リングの交差のリズムが変わります。速度差が大きいほど非同期感が増します - 外側リングのサイズ:
::afterのinset: -16pxを変えると外側リングとボタンの間隔が変わります。-22pxにするとより余裕のある間隔になります - リングの色:
border-top-colorとborder-left-colorを同じ色に揃えると統一感のあるシングルカラーになります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
