Progress Bar Styling and Customization

Progress Bar Styling and Customization

CSS styling tips for progress bars to make them look professional.

Gradient Background

.progress-bar {
  background: linear-gradient(90deg, #007bff, #00d4ff);
}

Striped Pattern

.progress-bar {
  background-image: linear-gradient(
    45deg, rgba(255,255,255,0.15) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.15) 75%, transparent 75%
  );
  background-size: 20px 20px;
}

Glow Effect

.progress-bar {
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

Rounded Corners

.progress-container { border-radius: 10px; overflow: hidden; }
.progress-bar { border-radius: 10px; }

Label Inside

.progress-container { position: relative; }
.progress-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: white; font-size: 12px; font-weight: bold;
}

Responsive

.progress-container { width: 100%; max-width: 500px; }

The Takeaway

Style the progress bar: gradient background (linear-gradient), striped pattern (diagonal stripes), glow effect (box-shadow), rounded corners (border-radius), label inside (absolute positioning), and responsive (width 100%, max-width). These CSS techniques make the progress bar look professional.