← All Examples

Progress Bars

Animated progress bars using the <progress> element and CSS.

Published May 19, 2026

Demo

CSS
HTML
JS
Rust
Upload

HTML

<progress value="75" max="100"></progress>
<progress class="success" value="85" max="100"></progress>
<progress class="warning" value="45" max="100"></progress>
<progress class="danger"  value="12" max="100"></progress>

CSS

progress {
  appearance: none;
  height: 10px;
  border: none;
  border-radius: 999px;
}

progress::-webkit-progress-bar {
  background: #e0e0ea;
  border-radius: 999px;
}

progress::-webkit-progress-value {
  background: #5b4cdb;
  border-radius: 999px;
}

progress::-moz-progress-bar {
  background: #5b4cdb;
  border-radius: 999px;
}

progress.success::-webkit-progress-value { background: #22c55e; }
progress.warning::-webkit-progress-value { background: #f59e0b; }
progress.danger::-webkit-progress-value  { background: #ef4444; }

How it works

The native <progress> element is styled using vendor-prefixed pseudo-elements. appearance:none removes defaults. ::-webkit-progress-bar styles the track; ::-webkit-progress-value styles the filled portion. Firefox uses ::-moz-progress-bar for the fill. Color variants are just class-based overrides.