Circular Progress Gauge

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="gauge-card">
  <h3>Server Capacity</h3>
  <div class="gauge-wrap">
    <svg class="gauge-svg" viewBox="0 0 120 120" width="180" height="180">
      <defs>
        <linearGradient id="gaugeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#2506ad" />
          <stop offset="100%" stop-color="#ff7b00" />
        </linearGradient>
      </defs>
      <circle class="gauge-track" cx="60" cy="60" r="50" />
      <circle class="gauge-bar" id="gaugeBar" cx="60" cy="60" r="50" />
    </svg>
    <div class="gauge-center">
      <strong id="gaugeValue">74%</strong>
      <small>Optimal</small>
    </div>
  </div>
  <div class="gauge-controls">
    <button class="gauge-btn" id="btnMinus" aria-label="Decrease percentage">-10%</button>
    <button class="gauge-btn" id="btnPlus" aria-label="Increase percentage">+10%</button>
  </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 a circular progress gauge card with SVG, CSS and vanilla JavaScript.

Requirements:
- A white dashboard card (max-width 320px) with header, centered circular gauge, and +/- control buttons.
- An SVG element with viewBox="0 0 120 120", rotated -90deg so the gauge starts at the top (12 o'clock).
- An SVG linear-gradient stroke (#2506ad to #ff7b00) applied to the foreground circle.
- Calculate circumference = 2 * PI * r (approx 314.16 for r=50). Set stroke-dasharray to the circumference.
- JavaScript updates stroke-dashoffset = circumference - (percent / 100) * circumference with a smooth 0.6s cubic-bezier transition.
- Centered percentage readout in bold navy text with status chip.
- Interactive +10% and -10% buttons clamped between 0% and 100%.

Return one HTML file with a <style> block and <script> tag.

How to build it, step by step

1. 1

   Draw two circles inside an SVG with identical radius and center (cx=60, cy=60, r=50).

2. 2

   Calculate the circumference with 2 * Math.PI * radius (314.16px).

3. 3

   Rotate the SVG by -90 degrees so progress begins at the top center.

4. 4

   Set stroke-dasharray to the total circumference and update stroke-dashoffset to show the fraction.

5. 5

   Add a CSS transition on stroke-dashoffset for animated changes.

Customisation tips

• Use stroke-linecap: round for rounded bar ends.
• Colour code thresholds: change the gradient or text to warning red above 90%.
• Connect to an IntersectionObserver to animate from 0% when scrolled into view.

More components