Progress Bar

jitesh208
Jan 28, 2026 6
Live Preview

Live Editor

<div class="progress-wrap">

  <div class="progress-bar" id="bar">
    <div class="progress-fill" id="fill">20%</div>
    <div class="remaining" id="remain">80%</div>
  </div>

  <div class="knob" id="knob"></div>

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

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

/* Wrapper */
.progress-wrap{
  width:420px;
  padding:14px;
  border-radius:999px;
  background:#f2efe9;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.9),
    0 12px 25px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  gap:14px;
}

/* Bar */
.progress-bar{
  position:relative;
  flex:1;
  height:56px;
  border-radius:999px;
  background:#e6e3de;
  overflow:hidden;
  box-shadow:inset 0 6px 10px rgba(0,0,0,.12);
}

/* Fill */
.progress-fill{
  height:100%;
  width:20%;
  background:linear-gradient(135deg,#f6b93b,#f0932b,#ff8c00);
  border-radius:999px 0 0 999px;
  display:flex;
  align-items:center;
  padding-left:20px;
  color:#fff;
  font-weight:700;
  font-size:16px;
  transition:width .25s ease;
}

/* Remaining text */
.remaining{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font-weight:700;
  font-size:16px;
  color:#666;
  pointer-events:none;
}

/* Knob */
.knob{
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,#ff9f43,#ff7a18);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.6),
    0 10px 20px rgba(0,0,0,.25);
  cursor:pointer;
  touch-action:none;
}
const bar = document.getElementById("bar");
const fill = document.getElementById("fill");
const remain = document.getElementById("remain");
const knob = document.getElementById("knob");

let isDragging = false;

function updateProgress(clientX){
  const rect = bar.getBoundingClientRect();
  let percent = ((clientX - rect.left) / rect.width) * 100;
  percent = Math.max(0, Math.min(100, percent));

  fill.style.width = percent + "%";
  fill.textContent = Math.round(percent) + "%";
  remain.textContent = Math.round(100 - percent) + "%";
}

/* Mouse events */
knob.addEventListener("mousedown", () => isDragging = true);
document.addEventListener("mouseup", () => isDragging = false);
document.addEventListener("mousemove", e => {
  if(isDragging) updateProgress(e.clientX);
});

/* Touch events */
knob.addEventListener("touchstart", () => isDragging = true);
document.addEventListener("touchend", () => isDragging = false);
document.addEventListener("touchmove", e => {
  if(isDragging) updateProgress(e.touches[0].clientX);
});
Categories

Progress Bar

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
