Progress Ring

CODE

HTML

<div class="demo-stage"><div class="pr-wrap"><svg class="pr-ring" width="160" height="160" viewBox="0 0 160 160"><circle class="pr-bg" cx="80" cy="80" r="68"></circle><circle class="pr-fg" cx="80" cy="80" r="68"></circle></svg><div class="pr-num" id="prNum">0%</div><button class="pr-btn" onclick="runRing()">START</button></div></div>

CSS

.demo-stage { display:flex; align-items:center; justify-content:center; padding:2rem; }
.pr-wrap { position:relative; text-align:center; }
.pr-ring { transform:rotate(-90deg); }
.pr-bg { fill:none; stroke:#E5E5E5; stroke-width:13; }
.pr-fg { fill:none; stroke:#E91B89; stroke-width:13; stroke-linecap:round; stroke-dasharray:427; stroke-dashoffset:427; transition:stroke-dashoffset .25s ease; }
.pr-num { position:absolute; top:80px; left:50%; transform:translate(-50%,-50%); font-family:'Oswald',sans-serif; font-size:2.1rem; color:#1A1A1A; }
.pr-btn { display:block; margin:1.4rem auto 0; padding:.75rem 2rem; background:#1A1A1A; color:#fff; border:none; font-family:'Oswald',sans-serif; letter-spacing:.2em; cursor:pointer; border-radius:6px; }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .pr-fg {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

function runRing(){
  const fg = document.querySelector('.pr-fg');
  const num = document.getElementById('prNum');
  const C = 427;
  let p = 0;
  fg.style.strokeDashoffset = C;
  num.textContent = '0%';
  const iv = setInterval(function(){
    p += Math.random() * 7 + 2;
    if (p >= 100){ p = 100; clearInterval(iv); }
    fg.style.strokeDashoffset = C * (1 - p / 100);
    num.textContent = Math.round(p) + '%';
  }, 180);
}

AI PROMPT

Claude Code Cursor v0

PROMPT

円形プログレスリングを作って。SVGに同心円2つ（背景グレー＋前景ピンク）、半径68なら円周は約427。前景circleにstroke-dasharray:427、stroke-dashoffsetを427（0%）〜0（100%）で制御。SVGをrotate(-90deg)で頂点開始。JSでsetIntervalごとに進捗を増やしoffsetと中央の数値を更新。stroke-linecap:roundで端を丸く。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

円形プログレスリング（Progress Ring）とは

円形に進捗を描くプログレスリング。アップロード・スコア・達成率の可視化に。SVG＋stroke制御。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。

使いどころ

データ取得待ち・画像や動画の読み込み中・ページ遷移中など、待ち時間のつなぎに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。

FAQ

円形プログレスリング（Progress Ring）はどんな効果ですか？

円形に進捗を描くプログレスリング。アップロード・スコア・達成率の可視化に。SVG＋stroke制御。データ取得待ち・画像や動画の読み込み中・ページ遷移中など、待ち時間のつなぎに向く演出です。

Progress RingはCSSだけで実装できますか？

見た目はCSSで作れますが、動きの制御にJavaScriptを併用します。本ページではHTML・CSS・JavaScriptのコードをまとめて掲載しています。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

RELATED EFFECTS

円形プログレスリング（Progress Ring）とは

使いどころ

CSS実装のポイント

CSSとJavaScriptの違い

FAQ