Free Component
Animated Circular Progress Ring
An interactive SVG circular progress gauge with vibrant gradient stroke and real-time percentage counter.
Colours in this gradient
#0f172a#6366f1#a855f7#ec4899
background: ;The code
Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="circ-wrapper">
<div class="circ-card">
<div class="circ-title">Monthly Goal Progress</div>
<div class="circ-gauge">
<svg class="circ-svg" viewBox="0 0 160 160">
<defs>
<linearGradient id="ringGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#6366f1" />
<stop offset="50%" stop-color="#a855f7" />
<stop offset="100%" stop-color="#ec4899" />
</linearGradient>
</defs>
<circle class="circ-bg" cx="80" cy="80" r="64" />
<circle class="circ-bar" id="progressBar" cx="80" cy="80" r="64" />
</svg>
<div class="circ-info">
<span class="circ-pct" id="progressPct">78%</span>
<span class="circ-lbl">Completed</span>
</div>
</div>
<div class="circ-actions">
<button class="circ-btn" data-val="25">25%</button>
<button class="circ-btn" data-val="50">50%</button>
<button class="circ-btn" data-val="78">78%</button>
<button class="circ-btn" data-val="100">100%</button>
</div>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.
Create an animated SVG circular progress gauge widget in HTML, CSS and vanilla JavaScript. Requirements: - SVG circular track with radius 64px rotated -90deg so progress starts at 12 o'clock. - Gradient stroke using SVG linearGradient with glow drop-shadow filter. - Dynamic stroke-dashoffset calculation based on 2*PI*r circumference. - Center overlay showing live percentage and status caption. - Interactive preset buttons to toggle between 25%, 50%, 78%, and 100%. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Calculate circumference (2 * Math.PI * r) for SVG circle stroke-dasharray.
- 2
Rotate SVG 90 degrees counter-clockwise so stroke fills starting from the top.
- 3
Calculate strokeDashoffset = circumference - (percent / 100) * circumference in JavaScript.
Customisation tips
- Add stroke-linecap: round for smooth capsule endings on the progress ring.
- Use SVG filter drop-shadow to give the stroke a subtle neon glow.