Gauge Widget

<div class="nuda-kpi-gauge">
  <svg class="nuda-kpi-gauge__svg" viewBox="0 0 100 60">
    <path class="nuda-kpi-gauge__arc-bg" d="M10,55 A40,40 0 0,1 90,55"></path>
    <path class="nuda-kpi-gauge__arc-fill" d="M10,55 A40,40 0 0,1 90,55"></path>
    <line class="nuda-kpi-gauge__needle" x1="50" y1="55" x2="50" y2="18"></line>
    <circle class="nuda-kpi-gauge__needle-hub" cx="50" cy="55" r="4"></circle>
  </svg>
  <div class="nuda-kpi-gauge__labels">
    <span class="nuda-kpi-gauge__min">0</span>
    <span class="nuda-kpi-gauge__val">67</span>
    <span class="nuda-kpi-gauge__max">100</span>
  </div>
  <div class="nuda-kpi-gauge__title">CPU Load %</div>
</div>

.nuda-kpi-gauge {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 1rem 1.3rem .8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  min-width: 190px;
}

.nuda-kpi-gauge__svg {
  width: 130px;
  height: 80px;
  overflow: visible;
}

.nuda-kpi-gauge__arc-bg {
  fill: none;
  stroke: rgba(255,255,255,.08);
  stroke-width: 8;
  stroke-linecap: round;
}

.nuda-kpi-gauge__arc-fill {
  fill: none;
  stroke: #e4ff54;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 125.7;
  stroke-dashoffset: 41.5;
  animation: _nuda-kpiGaugeDraw .8s ease-out;
}

.nuda-kpi-gauge__needle {
  stroke: #fafafa;
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: 50px 55px;
  transform: rotate(14deg);
  animation: _nuda-kpiNeedle .8s ease-out;
}

.nuda-kpi-gauge__needle-hub {
  fill: #fafafa;
}

.nuda-kpi-gauge__labels {
  display: flex;
  justify-content: space-between;
  width: 130px;
  margin-top: -4px;
}

.nuda-kpi-gauge__min,.nuda-kpi-gauge__max {
  color: #444;
  font-size: .65rem;
}

.nuda-kpi-gauge__val {
  color: #e4ff54;
  font-size: 1.1rem;
  font-weight: 700;
}

.nuda-kpi-gauge__title {
  color: #777;
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .2rem;
}

@keyframes _nuda-kpiGaugeDraw {
  from {
    stroke-dashoffset: 125.7;
  }
  to {
    stroke-dashoffset: 41.5;
  }
}

@keyframes _nuda-kpiNeedle {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(14deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-kpi-gauge__arc-fill,.nuda-kpi-gauge__needle {
    animation: none;
  }
}