Gauge

Radial value indicator.

html

<div class="gauge gauge--safe" style="--val:68;--accent:#A8E6C1;" role="img" aria-label="Gauge showing CPU load: 68 percent, safe zone">
  <div class="gauge__ring">
    <div class="gauge__hole">
      <span class="gauge__value">68<span class="gauge__unit">%</span></span>
      <span class="gauge__label">CPU load</span>
    </div>
  </div>
  <div class="gauge__scale" aria-hidden="true">
    <span class="gauge__tick">0%</span>
    <span class="gauge__tick">25%</span>
    <span class="gauge__tick">50%</span>
    <span class="gauge__tick">75%</span>
    <span class="gauge__tick">100%</span>
  </div>
  <p class="gauge__zone">Zone: safe</p>
</div>
<style>
.gauge { font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 260px; text-align: center; }
.gauge__ring { width: 160px; height: 160px; margin: 0 auto; border-radius: 50%; position: relative;
  background: conic-gradient(var(--accent) calc(var(--val) * 3.6deg), #24143022 0); }
.gauge--safe .gauge__ring { outline: 3px solid #241430; outline-offset: 3px; }
.gauge--warning .gauge__ring { outline: 3px dashed #241430; outline-offset: 3px; }
.gauge--critical .gauge__ring { outline: 3px dotted #241430; outline-offset: 3px; }
.gauge__hole { position: absolute; inset: 25px; border-radius: 50%; background: #FAF7F2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge__value { font-size: 28px; font-weight: 700; }
.gauge__unit { font-size: 16px; font-weight: 500; margin-left: 1px; }
.gauge__label { font-size: 12px; color: #241430aa; margin-top: 2px; }
.gauge__scale { display: flex; justify-content: space-between; max-width: 200px; margin: 14px auto 0;
  padding-top: 8px; border-top: 2px solid #24143033; font-size: 10px; color: #241430aa; }
.gauge__zone { margin: 10px 0 0; font-size: 13px; font-weight: 600; text-transform: capitalize; }
</style>

tailwind

<div class="gauge-tw gauge-tw--safe max-w-[260px] text-center font-sans text-sm" style="--val:68;--accent:#A8E6C1;" role="img" aria-label="Gauge showing CPU load: 68 percent, safe zone">
  <div class="gauge-tw__ring w-40 h-40 mx-auto rounded-full relative" style="background:conic-gradient(var(--accent) calc(var(--val) * 3.6deg), #24143022 0)">
    <div class="absolute inset-6 rounded-full bg-[#FAF7F2] flex flex-col items-center justify-center">
      <span class="text-[28px] font-bold">68<span class="text-base font-medium ml-px">%</span></span>
      <span class="text-xs text-[#241430aa] mt-0.5">CPU load</span>
    </div>
  </div>
  <div class="flex justify-between max-w-[200px] mx-auto mt-3.5 pt-2 border-t-2 border-[#24143033] text-[10px] text-[#241430aa]" aria-hidden="true">
    <span>0%</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span>
  </div>
  <p class="mt-2.5 text-[13px] font-semibold capitalize">Zone: safe</p>
</div>
<style>
.gauge-tw--safe .gauge-tw__ring { outline: 3px solid #241430; outline-offset: 3px; }
.gauge-tw--warning .gauge-tw__ring { outline: 3px dashed #241430; outline-offset: 3px; }
.gauge-tw--critical .gauge-tw__ring { outline: 3px dotted #241430; outline-offset: 3px; }
</style>

react

export function Gauge({
  value = 68,
  label = "CPU load",
  zone = "safe",
  accent = "#A8E6C1",
}) {
  const outline = {
    safe: "3px solid #241430",
    warning: "3px dashed #241430",
    critical: "3px dotted #241430",
  }[zone] ?? "3px solid #241430";
  return (
    <div role="img" aria-label={`Gauge showing ${label}: ${value} percent, ${zone} zone`}
      style={{ fontFamily: "system-ui, sans-serif", color: "#241430", maxWidth: 260, textAlign: "center", fontSize: 14 }}>
      <div style={{
        width: 160, height: 160, margin: "0 auto", borderRadius: "50%", position: "relative",
        background: `conic-gradient(${accent} ${value * 3.6}deg, #24143022 0)`,
        outline, outlineOffset: 3,
      }}>
        <div style={{ position: "absolute", inset: 25, borderRadius: "50%", background: "#FAF7F2",
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
          <span style={{ fontSize: 28, fontWeight: 700 }}>{value}<span style={{ fontSize: 16, fontWeight: 500, marginLeft: 1 }}>%</span></span>
          <span style={{ fontSize: 12, color: "#241430aa", marginTop: 2 }}>{label}</span>
        </div>
      </div>
      <div aria-hidden="true" style={{ display: "flex", justifyContent: "space-between", maxWidth: 200, margin: "14px auto 0",
        paddingTop: 8, borderTop: "2px solid #24143033", fontSize: 10, color: "#241430aa" }}>
        <span>0%</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span>
      </div>
      <p style={{ margin: "10px 0 0", fontSize: 13, fontWeight: 600, textTransform: "capitalize" }}>Zone: {zone}</p>
    </div>
  );
}