Circular Progress
A circular progress ring that smoothly fills to a target percentage using SVG stroke-dashoffset. Use it for profile completion meters, download indicators, or any percentage-based metric.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
circularprogressringpercentage
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A circular progress ring with smooth easing for displaying completion percentages.
CSS
css
.circle { width: 80px; height: 80px; position: relative; }
.circle svg { transform: rotate(-90deg); }
.circle .bg { fill: none; stroke: #27272a; stroke-width: 6; }
.circle .fill { fill: none; stroke: #22c55e; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 263.89378290154264; stroke-dashoffset: 263.89378290154264; animation: ease 1.5s ease-out forwards; }
@keyframes ease { to { stroke-dashoffset: 79.16813487046281; } }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="circle"><svg width="80" height="80" viewBox="0 0 100 100"><circle class="bg" cx="50" cy="50" r="42"/><circle class="fill" cx="50" cy="50" r="42"/></svg></div>Full Source
html
<!DOCTYPE html>
<html><head><style>
.circle { width: 80px; height: 80px; position: relative; }
.circle svg { transform: rotate(-90deg); }
.circle .bg { fill: none; stroke: #27272a; stroke-width: 6; }
.circle .fill { fill: none; stroke: #22c55e; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 263.89378290154264; stroke-dashoffset: 263.89378290154264; animation: ease 1.5s ease-out forwards; }
@keyframes ease { to { stroke-dashoffset: 79.16813487046281; } }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body>
<div class="circle"><svg width="80" height="80" viewBox="0 0 100 100"><circle class="bg" cx="50" cy="50" r="42"/><circle class="fill" cx="50" cy="50" r="42"/></svg></div>
</body></html>