Progress Ring
An SVG arc draws completion around a centered percentage
All platformsMotion & BackgroundsContent areaEffect
Live preview (drag the parameters, watch it change)
Code
<svg width="120" height="120" viewBox="0 0 76 76" style="transform:rotate(-90deg)">
<circle cx="38" cy="38" r="31" fill="none" stroke="#E3E0D8" stroke-width="7"/>
<circle id="ring" cx="38" cy="38" r="31" fill="none" stroke="#141414" stroke-width="7"
stroke-linecap="round" stroke-dasharray="195" stroke-dashoffset="195"/>
</svg>
<script>
// 周长 = 2πr ≈ 195；目标 72% → dashoffset = 195 × (1 − 0.72)
document.getElementById('ring').animate(
[{ strokeDashoffset: 195 }, { strokeDashoffset: 195 * (1 - .72) }],
{ duration: 1100, easing: 'cubic-bezier(.22,1,.36,1)', fill: 'forwards' });
</script><!-- 结构同上，svg 元素加类：class="h-[120px] w-[120px] -rotate-90"；动画逻辑同 html-css 档 -->export function ProgressRing({ value = 0.72, size = 120 }) {
const r = 31, c = 2 * Math.PI * r;
const ref = React.useRef(null);
React.useEffect(() => { ref.current?.animate(
[{ strokeDashoffset: c }, { strokeDashoffset: c * (1 - value) }],
{ duration: 1100, easing: "cubic-bezier(.22,1,.36,1)", fill: "forwards" }); }, [value]);
return (<svg width={size} height={size} viewBox="0 0 76 76" style={{ transform: "rotate(-90deg)" }}>
<circle cx="38" cy="38" r={r} fill="none" stroke="#E3E0D8" strokeWidth="7" />
<circle ref={ref} cx="38" cy="38" r={r} fill="none" stroke="#141414" strokeWidth="7"
strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c} />
</svg>);
}Code snippets are MIT-licensed — copy and adapt freely.
How this effect works
它是怎么工作的（中文）
SVG 圆的周长是 2πr，用 stroke-dasharray 把整圈分成「一段实线 + 空缺」，调 dashoffset 就能控制画出多少。动画时让 offset 从满值动到目标值即可。圆角端点（stroke-linecap: round）会让弧线显得柔和，是细节分。
How it works (English)
An SVG circle's circumference is 2πr; stroke-dasharray splits it into dash + gap, and stroke-dashoffset controls how much is drawn. Animate the offset from full to target. Rounded line caps soften the arc ends — a small detail that reads as polish.
参考与来源 Sources
本条为「批次 1（重建）」成果（2026-11-10 用户决定：原 妞妞老师 素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与 妞妞老师 原始素材无关。