Back to Snippets

Modern Pure CSS Progress Bars (5+ Colors & Styles)

Display task or loading progress with this collection of modern, pure CSS progress bars. Features multiple styles (flat, striped, animated, rounded, slim) and color variations (blue, green, red, orange, grey). No JavaScript required, easy to customize for any website or application UI.

710

#css

#progress bar

#pure css

#html

#loading indicator

#task progress

#ui element

#modern design

#multiple styles

#multiple colors

#animated

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

body, html {
  background-color: #f4f7f9;
}
/* ==== Global Showcase Styles ==== */
.pb-showcase-container {
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333;
}
.pb-section-title {
  font-size: 1.6em;
  color: #2c3e50;
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 8px;
}
.pb-section {
  display: flex;
  flex-direction: column; /* Stack progress bars */
  gap: 20px; /* Space between progress bars */
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0, 50, 100, 0.06);
}

/* ==== Base Progress Bar Styles ==== */
.pb-container {
  background-color: #e9ecef; /* Track color */
  border-radius: .25rem; /* Default Bootstrap-like radius */
  overflow: hidden; /* Important for border-radius on fill */
  box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
  height: 20px; /* Default height */
  position: relative; /* For labels if any */
}

.pb-fill {
  height: 100%;
  background-color: #007bff; /* Default blue, will be overridden by color classes */
  transition: width .6s ease;
  display: flex; /* For label alignment */
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ==== Style Variation 1: Basic Flat (pb-flat) ==== */
/* This is the default, .pb-flat class is mostly for semantic clarity if needed */
.pb-flat .pb-fill {
  /* No additional styling needed beyond base for flat */
}

/* ==== Style Variation 2: Striped (pb-striped) ==== */
.pb-striped .pb-fill {
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem; /* Adjust stripe size */
}

/* ==== Style Variation 3: Animated Stripes (pb-animated) ==== */
.pb-striped.pb-animated .pb-fill {
  animation: pb-stripes-animate 1s linear infinite;
}
@keyframes pb-stripes-animate {
  0% { background-position-x: 1rem; }
}

/* ==== Style Variation 4: Rounded (pb-rounded) ==== */
.pb-rounded {
  border-radius: 50px; /* Fully rounded container */
  height: 22px; /* Slightly taller for rounded aesthetic */
}
.pb-rounded .pb-fill {
  border-radius: 50px; /* Fully rounded fill */
}
.pb-rounded .pb-label {
  padding: 0 10px;
}

/* ==== Style Variation 5: Slim (pb-slim) ==== */
.pb-slim {
  height: 8px;
  border-radius: 4px;
  box-shadow: none; /* Often no shadow for slim bars */
}
.pb-slim .pb-fill {
  /* No text label typical for slim bars */
}

/* ==== Color Variations for .pb-fill ==== */
/* Blue (Default, but explicit class for clarity) */
.pb-blue .pb-fill { background-color: #2196F3; }

/* Green */
.pb-green .pb-fill { background-color: #4CAF50; }

/* Red */
.pb-red .pb-fill { background-color: #f44336; }

/* Orange */
.pb-orange .pb-fill { background-color: #ff9800; }

/* Grey */
.pb-grey .pb-fill { background-color: #78909c; }

<h3 class="pb-section-title">Basic Flat Progress Bars</h3>
  <div class="pb-section">
    <div class="pb-container pb-flat pb-blue"><div class="pb-fill" style="width: 75%;"></div></div>
    <div class="pb-container pb-flat pb-green"><div class="pb-fill" style="width: 60%;"></div></div>
    <div class="pb-container pb-flat pb-red"><div class="pb-fill" style="width: 40%;"></div></div>
    <div class="pb-container pb-flat pb-orange"><div class="pb-fill" style="width: 85%;"></div></div>
    <div class="pb-container pb-flat pb-grey"><div class="pb-fill" style="width: 50%;"></div></div>
  </div>

<h3 class="pb-section-title">Striped Progress Bars</h3>
  <div class="pb-section">
    <div class="pb-container pb-striped pb-blue"><div class="pb-fill" style="width: 70%;"></div></div>
    <div class="pb-container pb-striped pb-green"><div class="pb-fill" style="width: 55%;"></div></div>
    <div class="pb-container pb-striped pb-red"><div class="pb-fill" style="width: 30%;"></div></div>
  </div>

<h3 class="pb-section-title">Animated Striped Progress Bars</h3>
  <div class="pb-section">
    <div class="pb-container pb-striped pb-animated pb-orange"><div class="pb-fill" style="width: 80%;"></div></div>
    <div class="pb-container pb-striped pb-animated pb-grey"><div class="pb-fill" style="width: 65%;"></div></div>
    <div class="pb-container pb-striped pb-animated pb-blue"><div class="pb-fill" style="width: 45%;"></div></div>
  </div>

<h3 class="pb-section-title">Rounded Progress Bars (with Label)</h3>
  <div class="pb-section">
    <div class="pb-container pb-rounded pb-green"><div class="pb-fill" style="width: 78%;"><span class="pb-label">78%</span></div></div>
    <div class="pb-container pb-rounded pb-red"><div class="pb-fill" style="width: 22%;"><span class="pb-label">22%</span></div></div>
  </div>

<h3 class="pb-section-title">Slim Progress Bars</h3>
  <div class="pb-section">
    <div class="pb-container pb-slim pb-orange"><div class="pb-fill" style="width: 90%;"></div></div>
    <div class="pb-container pb-slim pb-grey"><div class="pb-fill" style="width: 15%;"></div></div>
  </div>

</div>

Modern Pure CSS Progress Bars (5+ Colors &amp; Styles)

Share Code Snippet

Modern Pure CSS Progress Bars (5+ Colors & Styles)