Semi Circle Progress Bar

jitesh208
Jan 28, 2026 4
Live Preview

Live Editor

<div class="card">

  <!-- Gauge -->
  <div class="gauge" style="--value:60">
    <div class="needle"></div>
  </div>

  <!-- Text -->
  <div class="value">60</div>
  <div class="state">Stable state</div>
  <div class="sub">Keep going — you're on track</div>

</div>
*{
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

body{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#f2f2f2;
}

/* Card */
.card{
  width:340px;
  padding:28px 24px 32px;
  background:#fff;
  border-radius:26px;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  text-align:center;
}

/* Gauge */
.gauge{
  position:relative;
  width:260px;
  height:130px;
  margin:0 auto 16px;
  overflow:hidden;
}

/* Arc */
.gauge::before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  background:
    conic-gradient(
      #18d4e0 0deg,
      #2bc9ff calc(var(--value) * 1.8deg),
      #e5e7eb 0deg
    );
  transform:rotate(-180deg);
  top:0;
  left:0;
}

/* Inner cut */
.gauge::after{
  content:"";
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  background:#fff;
  top:30px;
  left:30px;
}

/* Needle */
.needle{
  position:absolute;
  width:3px;
  height:90px;
  background:#111;
  top:40px;
  left:50%;
  transform-origin:bottom center;
  transform:translateX(-50%) rotate(calc(var(--value) * 1.8deg - 90deg));
  border-radius:2px;
}

/* Text */
.value{
  font-size:44px;
  font-weight:600;
  margin-top:-12px;
}

.state{
  font-size:18px;
  font-weight:600;
  margin-top:6px;
}

.sub{
  font-size:14px;
  color:#6b7280;
  margin-top:4px;
}
Categories

Semi Circle Progress Bar

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
