Html Gauge Meter

HTML / CSS / JS Open Kit Simulator ↗ All recipes

About this recipe

Libraries / imports

No imports detected

Hardware / pins

No physical pins or components referenced

Key API calls

document.getElementById() setInterval()

How to run

Press Render preview — renders live in a sandboxed iframe with mocked /api/*.

Editor html edits auto-save

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Gauge</title>
<style>body{font-family:system-ui;display:grid;place-items:center;min-height:100vh;background:#0b1220;color:#f1f5f9;margin:0}
.g{position:relative;width:240px;height:240px}
.g svg{transform:rotate(-90deg)}
.label{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.v{font-size:3rem;font-weight:900}
.u{color:#94a3b8;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase}</style></head><body>
<div class="g">
  <svg viewBox="0 0 100 100" width="240" height="240">
    <circle cx="50" cy="50" r="45" stroke="#1e293b" stroke-width="8" fill="none"/>
    <circle id="arc" cx="50" cy="50" r="45" stroke="#0ea5e9" stroke-width="8"
            fill="none" stroke-linecap="round"
            stroke-dasharray="283" stroke-dashoffset="283"/>
  </svg>
  <div class="label"><div><div class="v" id="v">0</div><div class="u">% humidity</div></div></div>
</div>
<script>
function set(pct){
  pct = Math.max(0, Math.min(100, pct));
  document.getElementById('arc').setAttribute('stroke-dashoffset', 283 - (283 * pct/100));
  document.getElementById('v').textContent = pct.toFixed(0);
}
let v = 0;
setInterval(() => { v = 30 + Math.sin(Date.now()/3000) * 30 + Math.random()*5; set(v); }, 500);
</script></body></html>

Output ready

Output will appear here after you click Run.

About this recipe

Libraries / imports

Hardware / pins

Key API calls

How to run

We use cookies to make DIY KIT work.