Progress Bar Components

The simplest progress bar — a filled track with a percentage label. Works for any completion state.

<div class="progress-track">
  <div class="progress-fill" style="width: 75%"></div>
</div>

.progress-track {
  width: 100%;
  height: 10px;
  background: rgba(235,104,53,0.12);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: #eb6835;
  border-radius: 999px;
  transition: width 0.6s ease;
}

Progress bars with a label and percentage above each track — perfect for skill sections in portfolios.

<div class="skill-bar">
  <div class="skill-label">
    <span>HTML</span>
    <span>92%</span>
  </div>
  <div class="progress-track">
    <div class="progress-fill" style="width:92%"></div>
  </div>
</div>

.skill-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.progress-track {
  height: 8px;
  background: rgba(235,104,53,0.1);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: #eb6835;
  transition: width 0.8s ease;
}

Eye-catching gradient-filled bars — available in orange, purple, and teal gradient variants.

<div class="progress-track">
  <div class="progress-fill gradient" style="width:80%"></div>
</div>

.progress-fill.gradient {
  background: linear-gradient(90deg, #eb6835, #fdcb6e);
}
/* Purple */
.progress-fill.purple {
  background: linear-gradient(90deg, #6c5ce7, #a29bfe);
}
/* Teal */
.progress-fill.teal {
  background: linear-gradient(90deg, #00b894, #06b6d4);
}

Diagonal stripe pattern on the fill — the bottom bar also has animated moving stripes.

<div class="progress-track">
  <div class="progress-fill striped animated" style="width:65%"></div>
</div>

.progress-fill.striped {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255,255,255,0.2) 8px,
    rgba(255,255,255,0.2) 16px
  );
}
.progress-fill.animated {
  animation: stripes 0.8s linear infinite;
  background-size: 28px 28px;
}
@keyframes stripes {
  from { background-position: 0 0; }
  to   { background-position: 28px 0; }
}

An infinite bouncing bar for unknown-duration operations like fetching data or file uploads.

<div class="progress-track">
  <div class="progress-fill indeterminate"></div>
</div>

.progress-fill.indeterminate {
  width: 40%;
  animation: indeterminate 1.4s ease-in-out infinite;
}
@keyframes indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

CSS-only radial progress rings — set the percentage via a CSS custom property.

<div class="circle-progress" style="--pct: 75">
  <span>75%</span>
</div>

.circle-progress {
  --size: 90px;
  --stroke: 8px;
  --color: #eb6835;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  background: conic-gradient(
    var(--color) calc(var(--pct) * 1%),
    rgba(235,104,53,0.1) 0
  );
  position: relative;
}
.circle-progress::before {
  content: '';
  position: absolute;
  inset: var(--stroke);
  border-radius: 50%;
  background: var(--card-bg);
}

A multi-segment stacked bar — ideal for showing storage, budget, or category breakdowns.

<div class="stacked-bar">
  <div class="seg" style="width:35%;background:#eb6835;"></div>
  <div class="seg" style="width:22%;background:#6c5ce7;"></div>
  <div class="seg" style="width:16%;background:#00b894;"></div>
  <div class="seg" style="width:9%; background:#fdcb6e;"></div>
</div>

.stacked-bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--card-border);
  gap: 2px;
}
.seg { height: 100%; transition: width 0.6s ease; }

A checkout-style step progress indicator — completed, active, and pending states included.

<div class="stepper">
  <div class="step done">
    <div class="step-circle">✓</div>
    <span>Cart</span>
  </div>
  <div class="step-line done"></div>
  <div class="step active">
    <div class="step-circle">2</div>
    <span>Payment</span>
  </div>
  <div class="step-line"></div>
  <div class="step">
    <div class="step-circle">3</div>
    <span>Done</span>
  </div>
</div>

.stepper { display: flex; align-items: center; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.step-circle {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  background: var(--card-border); color: var(--text-secondary);
  border: 2px solid var(--card-border);
}
.step.done .step-circle { background: #00b894; color: #fff; border-color: #00b894; }
.step.active .step-circle { background: #eb6835; color: #fff; border-color: #eb6835; }
.step-line { flex: 1; height: 2px; background: var(--card-border); }
.step-line.done { background: #00b894; }

A slim top-of-page loading indicator — perfect for page transitions and file upload feedback.

<div class="top-progress-track">
  <div class="top-progress-fill" style="width: 72%"></div>
</div>

.top-progress-track {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(235,104,53,0.15);
  z-index: 9999;
}
.top-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #eb6835, #6c5ce7);
  border-radius: 0 2px 2px 0;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(235,104,53,0.5);
}

Progress bars in semantic status colours — success (green), danger (red), warning (amber), info (blue).

<div class="progress-track">
  <div class="progress-fill success" style="width:92%"></div>
</div>

.progress-fill.success { background: #00b894; }
.progress-fill.danger  { background: #d63031; }
.progress-fill.warning { background: #fdcb6e; }
.progress-fill.info    { background: #0984e3; }

Live-updating progress bars synced to a range input — drag to see the bar respond in real time.

<input type="range" id="myRange" min="0" max="100" value="68"
  oninput="updateBar(this.value)">
<div class="progress-track">
  <div class="progress-fill" id="myBar" style="width:68%"></div>
</div>

function updateBar(val) {
  document.getElementById('myBar').style.width = val + '%';
  document.getElementById('myPct').textContent  = val + '%';
}

Neon glowing progress bars with a coloured drop shadow — made for dark dashboards and game UIs.

<div class="progress-track dark">
  <div class="progress-fill glow-orange" style="width:82%"></div>
</div>

.progress-fill.glow-orange {
  background: #eb6835;
  box-shadow: 0 0 10px #eb6835, 0 0 20px rgba(235,104,53,0.4);
}
.progress-fill.glow-purple {
  background: #a29bfe;
  box-shadow: 0 0 10px #a29bfe, 0 0 20px rgba(162,155,254,0.4);
}
.progress-fill.glow-cyan {
  background: #06b6d4;
  box-shadow: 0 0 10px #06b6d4, 0 0 20px rgba(6,182,212,0.4);
}