Progress Ring

DEMO

CODE

<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>

.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; }

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

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

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。