|$ curl https://forge-ai.dev/api/markdown?path=docs/components/progress
$cat docs/progress-indicators.md
updated Recently·16 min read·published
Progress Indicators
Introduction
Progress indicators communicate the status of ongoing operations. This guide covers production-ready progress patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including linear bars, circular rings, indeterminate loaders, stepped wizards, and accessibility best practices.
ℹ
info
Always pair progress bars with a text label and percentage when possible. Users find exact numbers more reassuring than a moving bar alone.
Basic Progress Bar
Simple linear progress bars with percentage labels. Set the width of the fill element to reflect progress.
basic-progress
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="progress-bar"> |
| 3 | <div class="info"> |
| 4 | <span> |
| 5 | Uploading... |
| 6 | </span> |
| 7 | <span> |
| 8 | 35% |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="track"> |
| 12 | <div class="fill" style="width:35%"> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="progress-bar"> |
| 17 | <div class="info"> |
| 18 | <span> |
| 19 | Processing |
| 20 | </span> |
| 21 | <span> |
| 22 | 72% |
| 23 | </span> |
| 24 | </div> |
| 25 | <div class="track"> |
| 26 | <div class="fill" style="width:72%"> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | <div class="progress-bar"> |
| 31 | <div class="info"> |
| 32 | <span> |
| 33 | Complete |
| 34 | </span> |
| 35 | <span> |
| 36 | 100% |
| 37 | </span> |
| 38 | </div> |
| 39 | <div class="track"> |
| 40 | <div class="fill" style="width:100%"> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | gap:20px; |
| 5 | max-width:420px; |
| 6 | margin:20px auto; |
| 7 | padding:16px |
| 8 | } |
| 9 | .progress-bar { |
| 10 | display:flex; |
| 11 | flex-direction:column; |
| 12 | gap:6px |
| 13 | } |
| 14 | .info { |
| 15 | display:flex; |
| 16 | justify-content:space-between; |
| 17 | font-size:11px; |
| 18 | color:#A0A0A0; |
| 19 | font-family:monospace |
| 20 | } |
| 21 | .track { |
| 22 | width:100%; |
| 23 | height:8px; |
| 24 | background:#1A1A2E; |
| 25 | border-radius:4px; |
| 26 | overflow:hidden |
| 27 | } |
| 28 | .fill { |
| 29 | height:100%; |
| 30 | background:#00FF41; |
| 31 | border-radius:4px; |
| 32 | transition:width .6s ease |
| 33 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-5 max-w-md mx-auto p-5 bg-[#0A0A0A]"> |
| 2 | <div class="flex flex-col gap-1.5"> |
| 3 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono"> |
| 4 | <span> |
| 5 | Uploading... |
| 6 | </span> |
| 7 | <span> |
| 8 | 35% |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="w-full h-2 bg-[#1A1A2E] rounded-full overflow-hidden"> |
| 12 | <div class="h-full bg-[#00FF41] rounded-full transition-all duration-[600ms]" style="width:35%"> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="flex flex-col gap-1.5"> |
| 17 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono"> |
| 18 | <span> |
| 19 | Processing |
| 20 | </span> |
| 21 | <span> |
| 22 | 72% |
| 23 | </span> |
| 24 | </div> |
| 25 | <div class="w-full h-2 bg-[#1A1A2E] rounded-full overflow-hidden"> |
| 26 | <div class="h-full bg-[#00FF41] rounded-full transition-all duration-[600ms]" style="width:72%"> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | <div class="flex flex-col gap-1.5"> |
| 31 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono"> |
| 32 | <span> |
| 33 | Complete |
| 34 | </span> |
| 35 | <span> |
| 36 | 100% |
| 37 | </span> |
| 38 | </div> |
| 39 | <div class="w-full h-2 bg-[#1A1A2E] rounded-full overflow-hidden"> |
| 40 | <div class="h-full bg-[#00FF41] rounded-full transition-all duration-[600ms]" style="width:100%"> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
untitled.html
HTML
| 1 | <div class="container py-4" style="max-width:420px"> |
| 2 | <div class="mb-3"> |
| 3 | <div class="d-flex justify-content-between mb-1"> |
| 4 | <small class="text-secondary font-monospace"> |
| 5 | Uploading... |
| 6 | </small> |
| 7 | <small class="text-secondary font-monospace"> |
| 8 | 35% |
| 9 | </small> |
| 10 | </div> |
| 11 | <div class="progress" style="height:8px;background:#1A1A2E;"> |
| 12 | <div class="progress-bar" role="progressbar" style="width:35%;background:#00FF41;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="mb-3"> |
| 17 | <div class="d-flex justify-content-between mb-1"> |
| 18 | <small class="text-secondary font-monospace"> |
| 19 | Processing |
| 20 | </small> |
| 21 | <small class="text-secondary font-monospace"> |
| 22 | 72% |
| 23 | </small> |
| 24 | </div> |
| 25 | <div class="progress" style="height:8px;background:#1A1A2E;"> |
| 26 | <div class="progress-bar" role="progressbar" style="width:72%;background:#00FF41;" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | <div> |
| 31 | <div class="d-flex justify-content-between mb-1"> |
| 32 | <small class="text-secondary font-monospace"> |
| 33 | Complete |
| 34 | </small> |
| 35 | <small class="text-secondary font-monospace"> |
| 36 | 100% |
| 37 | </small> |
| 38 | </div> |
| 39 | <div class="progress" style="height:8px;background:#1A1A2E;"> |
| 40 | <div class="progress-bar" role="progressbar" style="width:100%;background:#00FF41;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
Sizes
Thin, default, and thick progress bars to fit different UI contexts — from compact inline loaders to prominent upload indicators.
progress-sizes
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="progress-bar"> |
| 3 | <div class="info"> |
| 4 | <span> |
| 5 | Thin |
| 6 | </span> |
| 7 | <span> |
| 8 | 70% |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="track thin"> |
| 12 | <div class="fill" style="width:70%"> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="progress-bar"> |
| 17 | <div class="info"> |
| 18 | <span> |
| 19 | Default |
| 20 | </span> |
| 21 | <span> |
| 22 | 50% |
| 23 | </span> |
| 24 | </div> |
| 25 | <div class="track"> |
| 26 | <div class="fill" style="width:50%"> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | <div class="progress-bar"> |
| 31 | <div class="info"> |
| 32 | <span> |
| 33 | Thick |
| 34 | </span> |
| 35 | <span> |
| 36 | 85% |
| 37 | </span> |
| 38 | </div> |
| 39 | <div class="track thick"> |
| 40 | <div class="fill" style="width:85%"> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | gap:18px; |
| 5 | max-width:420px; |
| 6 | margin:20px auto; |
| 7 | padding:16px |
| 8 | } |
| 9 | .progress-bar { |
| 10 | display:flex; |
| 11 | flex-direction:column; |
| 12 | gap:4px |
| 13 | } |
| 14 | .info { |
| 15 | display:flex; |
| 16 | justify-content:space-between; |
| 17 | font-size:11px; |
| 18 | color:#A0A0A0; |
| 19 | font-family:monospace |
| 20 | } |
| 21 | .track { |
| 22 | width:100%; |
| 23 | background:#1A1A2E; |
| 24 | border-radius:999px; |
| 25 | overflow:hidden |
| 26 | } |
| 27 | .thin { |
| 28 | height:4px |
| 29 | } |
| 30 | .track:not(.thin):not(.thick) { |
| 31 | height:8px |
| 32 | } |
| 33 | .thick { |
| 34 | height:16px |
| 35 | } |
| 36 | .fill { |
| 37 | height:100%; |
| 38 | background:#00FF41; |
| 39 | border-radius:999px; |
| 40 | transition:width .6s ease |
| 41 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-[18px] max-w-md mx-auto p-5 bg-[#0A0A0A]"> |
| 2 | <div class="flex flex-col gap-1"> |
| 3 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono"> |
| 4 | <span> |
| 5 | Thin |
| 6 | </span> |
| 7 | <span> |
| 8 | 70% |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="w-full h-1 bg-[#1A1A2E] rounded-full overflow-hidden"> |
| 12 | <div class="h-full bg-[#00FF41] rounded-full transition-all duration-[600ms]" style="width:70%"> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="flex flex-col gap-1"> |
| 17 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono"> |
| 18 | <span> |
| 19 | Default |
| 20 | </span> |
| 21 | <span> |
| 22 | 50% |
| 23 | </span> |
| 24 | </div> |
| 25 | <div class="w-full h-2 bg-[#1A1A2E] rounded-full overflow-hidden"> |
| 26 | <div class="h-full bg-[#00FF41] rounded-full transition-all duration-[600ms]" style="width:50%"> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | <div class="flex flex-col gap-1"> |
| 31 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono"> |
| 32 | <span> |
| 33 | Thick |
| 34 | </span> |
| 35 | <span> |
| 36 | 85% |
| 37 | </span> |
| 38 | </div> |
| 39 | <div class="w-full h-4 bg-[#1A1A2E] rounded-full overflow-hidden"> |
| 40 | <div class="h-full bg-[#00FF41] rounded-full transition-all duration-[600ms]" style="width:85%"> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
untitled.html
HTML
| 1 | <div class="container py-4" style="max-width:420px"> |
| 2 | <div class="mb-3"> |
| 3 | <div class="d-flex justify-content-between mb-1"> |
| 4 | <small class="text-secondary font-monospace"> |
| 5 | Thin |
| 6 | </small> |
| 7 | <small class="text-secondary font-monospace"> |
| 8 | 70% |
| 9 | </small> |
| 10 | </div> |
| 11 | <div class="progress" style="height:4px;background:#1A1A2E;"> |
| 12 | <div class="progress-bar" role="progressbar" style="width:70%;background:#00FF41;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="mb-3"> |
| 17 | <div class="d-flex justify-content-between mb-1"> |
| 18 | <small class="text-secondary font-monospace"> |
| 19 | Default |
| 20 | </small> |
| 21 | <small class="text-secondary font-monospace"> |
| 22 | 50% |
| 23 | </small> |
| 24 | </div> |
| 25 | <div class="progress" style="height:8px;background:#1A1A2E;"> |
| 26 | <div class="progress-bar" role="progressbar" style="width:50%;background:#00FF41;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | <div> |
| 31 | <div class="d-flex justify-content-between mb-1"> |
| 32 | <small class="text-secondary font-monospace"> |
| 33 | Thick |
| 34 | </small> |
| 35 | <small class="text-secondary font-monospace"> |
| 36 | 85% |
| 37 | </small> |
| 38 | </div> |
| 39 | <div class="progress" style="height:16px;background:#1A1A2E;"> |
| 40 | <div class="progress-bar" role="progressbar" style="width:85%;background:#00FF41;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
Color Variants
Semantic color variants for different states — success, warning, danger, and info.
colored-progress
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="progress-bar"> |
| 3 | <div class="info"> |
| 4 | <span> |
| 5 | Success |
| 6 | </span> |
| 7 | <span> |
| 8 | 100% |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="track"> |
| 12 | <div class="fill success" style="width:100%"> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="progress-bar"> |
| 17 | <div class="info"> |
| 18 | <span> |
| 19 | Warning |
| 20 | </span> |
| 21 | <span> |
| 22 | 65% |
| 23 | </span> |
| 24 | </div> |
| 25 | <div class="track"> |
| 26 | <div class="fill warning" style="width:65%"> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | <div class="progress-bar"> |
| 31 | <div class="info"> |
| 32 | <span> |
| 33 | Danger |
| 34 | </span> |
| 35 | <span> |
| 36 | 25% |
| 37 | </span> |
| 38 | </div> |
| 39 | <div class="track"> |
| 40 | <div class="fill danger" style="width:25%"> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | <div class="progress-bar"> |
| 45 | <div class="info"> |
| 46 | <span> |
| 47 | Info |
| 48 | </span> |
| 49 | <span> |
| 50 | 80% |
| 51 | </span> |
| 52 | </div> |
| 53 | <div class="track"> |
| 54 | <div class="fill info-color" style="width:80%"> |
| 55 | </div> |
| 56 | </div> |
| 57 | </div> |
| 58 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | gap:16px; |
| 5 | max-width:420px; |
| 6 | margin:20px auto; |
| 7 | padding:16px |
| 8 | } |
| 9 | .progress-bar { |
| 10 | display:flex; |
| 11 | flex-direction:column; |
| 12 | gap:6px |
| 13 | } |
| 14 | .info { |
| 15 | display:flex; |
| 16 | justify-content:space-between; |
| 17 | font-size:11px; |
| 18 | color:#A0A0A0; |
| 19 | font-family:monospace |
| 20 | } |
| 21 | .track { |
| 22 | width:100%; |
| 23 | height:8px; |
| 24 | background:#1A1A2E; |
| 25 | border-radius:4px; |
| 26 | overflow:hidden |
| 27 | } |
| 28 | .fill { |
| 29 | height:100%; |
| 30 | border-radius:4px; |
| 31 | transition:width .6s ease |
| 32 | } |
| 33 | .success { |
| 34 | background:#22C55E |
| 35 | } |
| 36 | .warning { |
| 37 | background:#EAB308 |
| 38 | } |
| 39 | .danger { |
| 40 | background:#EF4444 |
| 41 | } |
| 42 | .info-color { |
| 43 | background:#3B82F6 |
| 44 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-4 max-w-md mx-auto p-5 bg-[#0A0A0A]"> |
| 2 | <div class="flex flex-col gap-1.5"> |
| 3 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono"> |
| 4 | <span> |
| 5 | Success |
| 6 | </span> |
| 7 | <span> |
| 8 | 100% |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="w-full h-2 bg-[#1A1A2E] rounded-full overflow-hidden"> |
| 12 | <div class="h-full bg-[#22C55E] rounded-full transition-all duration-[600ms]" style="width:100%"> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="flex flex-col gap-1.5"> |
| 17 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono"> |
| 18 | <span> |
| 19 | Warning |
| 20 | </span> |
| 21 | <span> |
| 22 | 65% |
| 23 | </span> |
| 24 | </div> |
| 25 | <div class="w-full h-2 bg-[#1A1A2E] rounded-full overflow-hidden"> |
| 26 | <div class="h-full bg-[#EAB308] rounded-full transition-all duration-[600ms]" style="width:65%"> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | <div class="flex flex-col gap-1.5"> |
| 31 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono"> |
| 32 | <span> |
| 33 | Danger |
| 34 | </span> |
| 35 | <span> |
| 36 | 25% |
| 37 | </span> |
| 38 | </div> |
| 39 | <div class="w-full h-2 bg-[#1A1A2E] rounded-full overflow-hidden"> |
| 40 | <div class="h-full bg-[#EF4444] rounded-full transition-all duration-[600ms]" style="width:25%"> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | <div class="flex flex-col gap-1.5"> |
| 45 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono"> |
| 46 | <span> |
| 47 | Info |
| 48 | </span> |
| 49 | <span> |
| 50 | 80% |
| 51 | </span> |
| 52 | </div> |
| 53 | <div class="w-full h-2 bg-[#1A1A2E] rounded-full overflow-hidden"> |
| 54 | <div class="h-full bg-[#3B82F6] rounded-full transition-all duration-[600ms]" style="width:80%"> |
| 55 | </div> |
| 56 | </div> |
| 57 | </div> |
| 58 | </div> |
untitled.html
HTML
| 1 | <div class="container py-4" style="max-width:420px"> |
| 2 | <div class="mb-3"> |
| 3 | <div class="d-flex justify-content-between mb-1"> |
| 4 | <small class="text-secondary font-monospace"> |
| 5 | Success |
| 6 | </small> |
| 7 | <small class="text-secondary font-monospace"> |
| 8 | 100% |
| 9 | </small> |
| 10 | </div> |
| 11 | <div class="progress" style="height:8px;background:#1A1A2E;"> |
| 12 | <div class="progress-bar bg-success" role="progressbar" style="width:100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="mb-3"> |
| 17 | <div class="d-flex justify-content-between mb-1"> |
| 18 | <small class="text-secondary font-monospace"> |
| 19 | Warning |
| 20 | </small> |
| 21 | <small class="text-secondary font-monospace"> |
| 22 | 65% |
| 23 | </small> |
| 24 | </div> |
| 25 | <div class="progress" style="height:8px;background:#1A1A2E;"> |
| 26 | <div class="progress-bar bg-warning" role="progressbar" style="width:65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | <div class="mb-3"> |
| 31 | <div class="d-flex justify-content-between mb-1"> |
| 32 | <small class="text-secondary font-monospace"> |
| 33 | Danger |
| 34 | </small> |
| 35 | <small class="text-secondary font-monospace"> |
| 36 | 25% |
| 37 | </small> |
| 38 | </div> |
| 39 | <div class="progress" style="height:8px;background:#1A1A2E;"> |
| 40 | <div class="progress-bar bg-danger" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | <div> |
| 45 | <div class="d-flex justify-content-between mb-1"> |
| 46 | <small class="text-secondary font-monospace"> |
| 47 | Info |
| 48 | </small> |
| 49 | <small class="text-secondary font-monospace"> |
| 50 | 80% |
| 51 | </small> |
| 52 | </div> |
| 53 | <div class="progress" style="height:8px;background:#1A1A2E;"> |
| 54 | <div class="progress-bar bg-info" role="progressbar" style="width:80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"> |
| 55 | </div> |
| 56 | </div> |
| 57 | </div> |
| 58 | </div> |
⚠
warning
Avoid using only color to convey progress meaning. Always include text labels or icons alongside color-coded progress bars for users with color vision deficiencies.
Striped & Animated
Progress bars with diagonal stripe patterns and a scrolling animation to indicate active work.
striped-progress
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="progress-bar"> |
| 3 | <div class="info"> |
| 4 | <span> |
| 5 | Downloading |
| 6 | </span> |
| 7 | <span> |
| 8 | 58% |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="track"> |
| 12 | <div class="fill striped animated" style="width:58%"> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="progress-bar"> |
| 17 | <div class="info"> |
| 18 | <span> |
| 19 | Installing |
| 20 | </span> |
| 21 | <span> |
| 22 | 90% |
| 23 | </span> |
| 24 | </div> |
| 25 | <div class="track"> |
| 26 | <div class="fill striped animated" style="width:90%"> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | gap:20px; |
| 5 | max-width:420px; |
| 6 | margin:20px auto; |
| 7 | padding:16px |
| 8 | } |
| 9 | .progress-bar { |
| 10 | display:flex; |
| 11 | flex-direction:column; |
| 12 | gap:6px |
| 13 | } |
| 14 | .info { |
| 15 | display:flex; |
| 16 | justify-content:space-between; |
| 17 | font-size:11px; |
| 18 | color:#A0A0A0; |
| 19 | font-family:monospace |
| 20 | } |
| 21 | .track { |
| 22 | width:100%; |
| 23 | height:10px; |
| 24 | background:#1A1A2E; |
| 25 | border-radius:5px; |
| 26 | overflow:hidden |
| 27 | } |
| 28 | .fill { |
| 29 | height:100%; |
| 30 | border-radius:5px; |
| 31 | transition:width .6s ease; |
| 32 | background:#00FF41 |
| 33 | } |
| 34 | .striped { |
| 35 | background-image:linear-gradient(45deg, |
| 36 | rgba(255, |
| 37 | 255, |
| 38 | 255, |
| 39 | .1) 25%, |
| 40 | transparent 25%, |
| 41 | transparent 50%, |
| 42 | rgba(255, |
| 43 | 255, |
| 44 | 255, |
| 45 | .1) 50%, |
| 46 | rgba(255, |
| 47 | 255, |
| 48 | 255, |
| 49 | .1) 75%, |
| 50 | transparent 75%); |
| 51 | background-size:20px 20px |
| 52 | } |
| 53 | .animated { |
| 54 | animation:stripe-scroll 1s linear infinite |
| 55 | } |
| 56 | @keyframes stripe-scroll { |
| 57 | to { |
| 58 | background-position:20px 0 |
| 59 | } |
| 60 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-5 max-w-md mx-auto p-5 bg-[#0A0A0A]"> |
| 2 | <div class="flex flex-col gap-1.5"> |
| 3 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono"> |
| 4 | <span> |
| 5 | Downloading |
| 6 | </span> |
| 7 | <span> |
| 8 | 58% |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="w-full h-2.5 bg-[#1A1A2E] rounded-[5px] overflow-hidden"> |
| 12 | <div class="h-full rounded-[5px] bg-[#00FF41] transition-all duration-[600ms] bg-[linear-gradient(45deg,rgba(255,255,255,0.1)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.1)_75%,transparent_75%)] bg-[length:20px_20px] animate-[stripe-scroll_1s_linear_infinite]" style="width:58%"> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="flex flex-col gap-1.5"> |
| 17 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono"> |
| 18 | <span> |
| 19 | Installing |
| 20 | </span> |
| 21 | <span> |
| 22 | 90% |
| 23 | </span> |
| 24 | </div> |
| 25 | <div class="w-full h-2.5 bg-[#1A1A2E] rounded-[5px] overflow-hidden"> |
| 26 | <div class="h-full rounded-[5px] bg-[#00FF41] transition-all duration-[600ms] bg-[linear-gradient(45deg,rgba(255,255,255,0.1)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.1)_75%,transparent_75%)] bg-[length:20px_20px] animate-[stripe-scroll_1s_linear_infinite]" style="width:90%"> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | </div> |
untitled.html
HTML
| 1 | <div class="container py-4" style="max-width:420px"> |
| 2 | <div class="mb-3"> |
| 3 | <div class="d-flex justify-content-between mb-1"> |
| 4 | <small class="text-secondary font-monospace"> |
| 5 | Downloading |
| 6 | </small> |
| 7 | <small class="text-secondary font-monospace"> |
| 8 | 58% |
| 9 | </small> |
| 10 | </div> |
| 11 | <div class="progress" style="height:10px;background:#1A1A2E;"> |
| 12 | <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width:58%;background:#00FF41;--bs-progress-bar-bg:#00FF41;" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100"> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div> |
| 17 | <div class="d-flex justify-content-between mb-1"> |
| 18 | <small class="text-secondary font-monospace"> |
| 19 | Installing |
| 20 | </small> |
| 21 | <small class="text-secondary font-monospace"> |
| 22 | 90% |
| 23 | </small> |
| 24 | </div> |
| 25 | <div class="progress" style="height:10px;background:#1A1A2E;"> |
| 26 | <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width:90%;background:#00FF41;--bs-progress-bar-bg:#00FF41;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | </div> |
Circular Progress
Circle and ring-style progress indicators — great for dashboards, profile completion, and compact spaces.
circular-progress
Live
untitled.html
HTML
| 1 | <div class="c-wrap"> |
| 2 | <div class="circle" data-pct="75"> |
| 3 | <svg viewBox="0 0 36 36"> |
| 4 | <path class="bg" d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#1A1A2E" stroke-width="3"/> |
| 5 | <path class="fg" d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#00FF41" stroke-width="3" stroke-dasharray="75, 100"/> |
| 6 | </svg> |
| 7 | <span class="pct"> |
| 8 | 75% |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="circle" data-pct="40"> |
| 12 | <svg viewBox="0 0 36 36"> |
| 13 | <path class="bg" d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#1A1A2E" stroke-width="3"/> |
| 14 | <path class="fg" d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#3B82F6" stroke-width="3" stroke-dasharray="40, 100"/> |
| 15 | </svg> |
| 16 | <span class="pct"> |
| 17 | 40% |
| 18 | </span> |
| 19 | </div> |
| 20 | <div class="circle" data-pct="92"> |
| 21 | <svg viewBox="0 0 36 36"> |
| 22 | <path class="bg" d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#1A1A2E" stroke-width="3"/> |
| 23 | <path class="fg" d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#22C55E" stroke-width="3" stroke-dasharray="92, 100"/> |
| 24 | </svg> |
| 25 | <span class="pct"> |
| 26 | 92% |
| 27 | </span> |
| 28 | </div> |
| 29 | </div> |
untitled.css
CSS
| 1 | .c-wrap { |
| 2 | display:flex; |
| 3 | gap:24px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .circle { |
| 9 | position:relative; |
| 10 | width:80px; |
| 11 | height:80px |
| 12 | } |
| 13 | .circle svg { |
| 14 | transform:rotate(-90deg); |
| 15 | width:100%; |
| 16 | height:100% |
| 17 | } |
| 18 | .fg { |
| 19 | transition:stroke-dasharray .6s ease; |
| 20 | stroke-linecap:round |
| 21 | } |
| 22 | .pct { |
| 23 | position:absolute; |
| 24 | top:50%; |
| 25 | left:50%; |
| 26 | transform:translate(-50%, |
| 27 | -50%); |
| 28 | font-size:14px; |
| 29 | font-weight:700; |
| 30 | color:#E0E0E0; |
| 31 | font-family:monospace |
| 32 | } |
untitled.html
HTML
| 1 | <div class="flex gap-6 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <div class="relative w-20 h-20"> |
| 3 | <svg class="w-full h-full -rotate-90" viewBox="0 0 36 36"> |
| 4 | <path d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#1A1A2E" stroke-width="3"/> |
| 5 | <path d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#00FF41" stroke-width="3" stroke-dasharray="75, 100" stroke-linecap="round" class="transition-all duration-[600ms]"/> |
| 6 | </svg> |
| 7 | <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm font-bold text-[#E0E0E0] font-mono"> |
| 8 | 75% |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="relative w-20 h-20"> |
| 12 | <svg class="w-full h-full -rotate-90" viewBox="0 0 36 36"> |
| 13 | <path d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#1A1A2E" stroke-width="3"/> |
| 14 | <path d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#3B82F6" stroke-width="3" stroke-dasharray="40, 100" stroke-linecap="round" class="transition-all duration-[600ms]"/> |
| 15 | </svg> |
| 16 | <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm font-bold text-[#E0E0E0] font-mono"> |
| 17 | 40% |
| 18 | </span> |
| 19 | </div> |
| 20 | <div class="relative w-20 h-20"> |
| 21 | <svg class="w-full h-full -rotate-90" viewBox="0 0 36 36"> |
| 22 | <path d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#1A1A2E" stroke-width="3"/> |
| 23 | <path d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#22C55E" stroke-width="3" stroke-dasharray="92, 100" stroke-linecap="round" class="transition-all duration-[600ms]"/> |
| 24 | </svg> |
| 25 | <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm font-bold text-[#E0E0E0] font-mono"> |
| 26 | 92% |
| 27 | </span> |
| 28 | </div> |
| 29 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center py-4"> |
| 2 | <div class="position-relative" style="width:80px;height:80px;"> |
| 3 | <svg class="position-absolute top-0 start-0 w-100 h-100" style="transform:rotate(-90deg)" viewBox="0 0 36 36"> |
| 4 | <path d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#1A1A2E" stroke-width="3"/> |
| 5 | <path d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#00FF41" stroke-width="3" stroke-dasharray="75, 100" stroke-linecap="round"/> |
| 6 | </svg> |
| 7 | <span class="position-absolute top-50 start-50 translate-middle text-light fw-bold font-monospace" style="font-size:14px;"> |
| 8 | 75% |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="position-relative" style="width:80px;height:80px;"> |
| 12 | <svg class="position-absolute top-0 start-0 w-100 h-100" style="transform:rotate(-90deg)" viewBox="0 0 36 36"> |
| 13 | <path d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#1A1A2E" stroke-width="3"/> |
| 14 | <path d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#3B82F6" stroke-width="3" stroke-dasharray="40, 100" stroke-linecap="round"/> |
| 15 | </svg> |
| 16 | <span class="position-absolute top-50 start-50 translate-middle text-light fw-bold font-monospace" style="font-size:14px;"> |
| 17 | 40% |
| 18 | </span> |
| 19 | </div> |
| 20 | <div class="position-relative" style="width:80px;height:80px;"> |
| 21 | <svg class="position-absolute top-0 start-0 w-100 h-100" style="transform:rotate(-90deg)" viewBox="0 0 36 36"> |
| 22 | <path d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#1A1A2E" stroke-width="3"/> |
| 23 | <path d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 15.9155 15.9155 0 0 1 0-31.831" fill="none" stroke="#22C55E" stroke-width="3" stroke-dasharray="92, 100" stroke-linecap="round"/> |
| 24 | </svg> |
| 25 | <span class="position-absolute top-50 start-50 translate-middle text-light fw-bold font-monospace" style="font-size:14px;"> |
| 26 | 92% |
| 27 | </span> |
| 28 | </div> |
| 29 | </div> |
✓
best practice
Circular progress works best at small sizes where a linear bar would take too much horizontal space. Keep the percentage text inside the ring for compactness.
Indeterminate
Progress indicators with no known end — the bar or spinner animates continuously to show ongoing activity.
indeterminate
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="progress-bar"> |
| 3 | <span class="lbl"> |
| 4 | Loading data... |
| 5 | </span> |
| 6 | <div class="track"> |
| 7 | <div class="fill indeterminate"> |
| 8 | </div> |
| 9 | </div> |
| 10 | </div> |
| 11 | <div class="c-wrap"> |
| 12 | <div class="spinner-ring"> |
| 13 | <svg viewBox="0 0 36 36"> |
| 14 | <circle cx="18" cy="18" r="15.9155" fill="none" stroke="#1A1A2E" stroke-width="3"/> |
| 15 | <circle cx="18" cy="18" r="15.9155" fill="none" stroke="#00FF41" stroke-width="3" stroke-dasharray="25, 75" stroke-linecap="round" class="spin-arc"/> |
| 16 | </svg> |
| 17 | </div> |
| 18 | <div class="spinner-ring"> |
| 19 | <svg viewBox="0 0 36 36"> |
| 20 | <circle cx="18" cy="18" r="15.9155" fill="none" stroke="#1A1A2E" stroke-width="3"/> |
| 21 | <circle cx="18" cy="18" r="15.9155" fill="none" stroke="#3B82F6" stroke-width="3" stroke-dasharray="15, 85" stroke-linecap="round" class="spin-arc"/> |
| 22 | </svg> |
| 23 | </div> |
| 24 | </div> |
| 25 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | max-width:420px; |
| 3 | margin:20px auto; |
| 4 | display:flex; |
| 5 | flex-direction:column; |
| 6 | gap:24px; |
| 7 | padding:16px |
| 8 | } |
| 9 | .lbl { |
| 10 | font-size:11px; |
| 11 | color:#A0A0A0; |
| 12 | font-family:monospace; |
| 13 | display:block; |
| 14 | margin-bottom:6px |
| 15 | } |
| 16 | .track { |
| 17 | width:100%; |
| 18 | height:6px; |
| 19 | background:#1A1A2E; |
| 20 | border-radius:3px; |
| 21 | overflow:hidden; |
| 22 | position:relative |
| 23 | } |
| 24 | .fill { |
| 25 | height:100%; |
| 26 | border-radius:3px; |
| 27 | position:absolute; |
| 28 | background:#00FF41 |
| 29 | } |
| 30 | .indeterminate { |
| 31 | width:40%; |
| 32 | animation:slide-bar 1.5s ease-in-out infinite |
| 33 | } |
| 34 | @keyframes slide-bar { |
| 35 | 0% { |
| 36 | left:-40% |
| 37 | } |
| 38 | 100% { |
| 39 | left:100% |
| 40 | } |
| 41 | } |
| 42 | .c-wrap { |
| 43 | display:flex; |
| 44 | gap:20px; |
| 45 | align-items:center; |
| 46 | justify-content:center |
| 47 | } |
| 48 | .spinner-ring { |
| 49 | width:48px; |
| 50 | height:48px; |
| 51 | transform:rotate(-90deg) |
| 52 | } |
| 53 | .spin-arc { |
| 54 | animation:spin-ring 1.2s linear infinite; |
| 55 | transform-origin:center |
| 56 | } |
| 57 | @keyframes spin-ring { |
| 58 | to { |
| 59 | transform:rotate(360deg) |
| 60 | } |
| 61 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-6 max-w-md mx-auto p-5 bg-[#0A0A0A]"> |
| 2 | <div> |
| 3 | <span class="block text-[11px] text-[#A0A0A0] font-mono mb-1.5"> |
| 4 | Loading data... |
| 5 | </span> |
| 6 | <div class="w-full h-1.5 bg-[#1A1A2E] rounded-[3px] overflow-hidden relative"> |
| 7 | <div class="absolute h-full w-[40%] bg-[#00FF41] rounded-[3px] animate-[slide-bar_1.5s_ease-in-out_infinite]"> |
| 8 | </div> |
| 9 | </div> |
| 10 | </div> |
| 11 | <div class="flex gap-5 items-center justify-center"> |
| 12 | <div class="w-12 h-12 -rotate-90"> |
| 13 | <svg class="w-full h-full" viewBox="0 0 36 36"> |
| 14 | <circle cx="18" cy="18" r="15.9155" fill="none" stroke="#1A1A2E" stroke-width="3"/> |
| 15 | <circle cx="18" cy="18" r="15.9155" fill="none" stroke="#00FF41" stroke-width="3" stroke-dasharray="25, 75" stroke-linecap="round" class="origin-center animate-[spin-ring_1.2s_linear_infinite]"/> |
| 16 | </svg> |
| 17 | </div> |
| 18 | <div class="w-12 h-12 -rotate-90"> |
| 19 | <svg class="w-full h-full" viewBox="0 0 36 36"> |
| 20 | <circle cx="18" cy="18" r="15.9155" fill="none" stroke="#1A1A2E" stroke-width="3"/> |
| 21 | <circle cx="18" cy="18" r="15.9155" fill="none" stroke="#3B82F6" stroke-width="3" stroke-dasharray="15, 85" stroke-linecap="round" class="origin-center animate-[spin-ring_1.2s_linear_infinite]"/> |
| 22 | </svg> |
| 23 | </div> |
| 24 | </div> |
| 25 | </div> |
untitled.html
HTML
| 1 | <div class="container py-4" style="max-width:420px"> |
| 2 | <div class="mb-4"> |
| 3 | <span class="d-block text-secondary font-monospace mb-1" style="font-size:11px;"> |
| 4 | Loading data... |
| 5 | </span> |
| 6 | <div class="progress" style="height:6px;background:#1A1A2E;"> |
| 7 | <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width:100%;background:#00FF41;--bs-progress-bar-bg:#00FF41;"> |
| 8 | </div> |
| 9 | </div> |
| 10 | </div> |
| 11 | <div class="d-flex gap-4 align-items-center justify-content-center"> |
| 12 | <div class="spinner-border text-success" role="status" style="width:48px;height:48px;color:#00FF41!important;"> |
| 13 | <span class="visually-hidden"> |
| 14 | Loading... |
| 15 | </span> |
| 16 | </div> |
| 17 | <div class="spinner-border text-info" role="status" style="width:48px;height:48px;"> |
| 18 | <span class="visually-hidden"> |
| 19 | Loading... |
| 20 | </span> |
| 21 | </div> |
| 22 | </div> |
| 23 | </div> |
📝
note
Use indeterminate progress when the total time or size is unknown (e.g., waiting for a server response). Switch to determinate progress once the total is known.
Stepped Progress
Multi-step progress indicators showing completed, current, and upcoming steps in a wizard or checkout flow.
stepped-progress
Live
untitled.html
HTML
| 1 | <div class="stepper"> |
| 2 | <div class="step done"> |
| 3 | <div class="circle"> |
| 4 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 5 | <polyline points="20 6 9 17 4 12"/> |
| 6 | </svg> |
| 7 | </div> |
| 8 | <span class="step-label"> |
| 9 | Cart |
| 10 | </span> |
| 11 | </div> |
| 12 | <div class="line done"> |
| 13 | </div> |
| 14 | <div class="step done"> |
| 15 | <div class="circle"> |
| 16 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 17 | <polyline points="20 6 9 17 4 12"/> |
| 18 | </svg> |
| 19 | </div> |
| 20 | <span class="step-label"> |
| 21 | Shipping |
| 22 | </span> |
| 23 | </div> |
| 24 | <div class="line active"> |
| 25 | </div> |
| 26 | <div class="step current"> |
| 27 | <div class="circle"> |
| 28 | 3 |
| 29 | </div> |
| 30 | <span class="step-label"> |
| 31 | Payment |
| 32 | </span> |
| 33 | </div> |
| 34 | <div class="line"> |
| 35 | </div> |
| 36 | <div class="step"> |
| 37 | <div class="circle"> |
| 38 | 4 |
| 39 | </div> |
| 40 | <span class="step-label"> |
| 41 | Review |
| 42 | </span> |
| 43 | </div> |
| 44 | </div> |
untitled.css
CSS
| 1 | .stepper { |
| 2 | display:flex; |
| 3 | align-items:flex-start; |
| 4 | justify-content:center; |
| 5 | gap:0; |
| 6 | max-width:400px; |
| 7 | margin:24px auto; |
| 8 | padding:16px |
| 9 | } |
| 10 | .step { |
| 11 | display:flex; |
| 12 | flex-direction:column; |
| 13 | align-items:center; |
| 14 | gap:8px; |
| 15 | min-width:60px |
| 16 | } |
| 17 | .circle { |
| 18 | width:36px; |
| 19 | height:36px; |
| 20 | border-radius:50%; |
| 21 | display:flex; |
| 22 | align-items:center; |
| 23 | justify-content:center; |
| 24 | font-size:13px; |
| 25 | font-weight:600; |
| 26 | color:#606080; |
| 27 | background:#0A0A0F; |
| 28 | border:2px solid #2A2A3E; |
| 29 | transition:all .3s ease; |
| 30 | font-family:monospace |
| 31 | } |
| 32 | .step.done .circle { |
| 33 | background:#00FF41; |
| 34 | border-color:#00FF41; |
| 35 | color:#0A0A0A |
| 36 | } |
| 37 | .step.current .circle { |
| 38 | border-color:#00FF41; |
| 39 | color:#00FF41; |
| 40 | box-shadow:0 0 0 4px rgba(0, |
| 41 | 255, |
| 42 | 65, |
| 43 | .15) |
| 44 | } |
| 45 | .step-label { |
| 46 | font-size:10px; |
| 47 | color:#606080; |
| 48 | text-transform:uppercase; |
| 49 | letter-spacing:.5px |
| 50 | } |
| 51 | .step.done .step-label, |
| 52 | .step.current .step-label { |
| 53 | color:#E0E0E0 |
| 54 | } |
| 55 | .line { |
| 56 | width:40px; |
| 57 | height:2px; |
| 58 | background:#2A2A3E; |
| 59 | margin-top:17px; |
| 60 | transition:background .3s |
| 61 | } |
| 62 | .line.done { |
| 63 | background:#00FF41 |
| 64 | } |
| 65 | .line.active { |
| 66 | background:linear-gradient(90deg, |
| 67 | #00FF41 50%, |
| 68 | #2A2A3E 50%) |
| 69 | } |
untitled.html
HTML
| 1 | <div class="flex items-start justify-center gap-0 max-w-md mx-auto p-4 bg-[#0A0A0A]"> |
| 2 | <div class="flex flex-col items-center gap-2 min-w-[60px]"> |
| 3 | <div class="w-9 h-9 rounded-full flex items-center justify-center text-[13px] font-semibold text-[#0A0A0A] bg-[#00FF41] border-2 border-[#00FF41] font-mono"> |
| 4 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 5 | <polyline points="20 6 9 17 4 12"/> |
| 6 | </svg> |
| 7 | </div> |
| 8 | <span class="text-[10px] text-[#E0E0E0] uppercase tracking-wide"> |
| 9 | Cart |
| 10 | </span> |
| 11 | </div> |
| 12 | <div class="w-10 h-0.5 bg-[#00FF41] mt-[17px]"> |
| 13 | </div> |
| 14 | <div class="flex flex-col items-center gap-2 min-w-[60px]"> |
| 15 | <div class="w-9 h-9 rounded-full flex items-center justify-center text-[13px] font-semibold text-[#0A0A0A] bg-[#00FF41] border-2 border-[#00FF41] font-mono"> |
| 16 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 17 | <polyline points="20 6 9 17 4 12"/> |
| 18 | </svg> |
| 19 | </div> |
| 20 | <span class="text-[10px] text-[#E0E0E0] uppercase tracking-wide"> |
| 21 | Shipping |
| 22 | </span> |
| 23 | </div> |
| 24 | <div class="w-10 h-0.5 bg-[linear-gradient(90deg,#00FF41_50%,#2A2A3E_50%)] mt-[17px]"> |
| 25 | </div> |
| 26 | <div class="flex flex-col items-center gap-2 min-w-[60px]"> |
| 27 | <div class="w-9 h-9 rounded-full flex items-center justify-center text-[13px] font-semibold text-[#00FF41] bg-[#0A0A0F] border-2 border-[#00FF41] shadow-[0_0_0_4px_rgba(0,255,65,0.15)] font-mono"> |
| 28 | 3 |
| 29 | </div> |
| 30 | <span class="text-[10px] text-[#E0E0E0] uppercase tracking-wide"> |
| 31 | Payment |
| 32 | </span> |
| 33 | </div> |
| 34 | <div class="w-10 h-0.5 bg-[#2A2A3E] mt-[17px]"> |
| 35 | </div> |
| 36 | <div class="flex flex-col items-center gap-2 min-w-[60px]"> |
| 37 | <div class="w-9 h-9 rounded-full flex items-center justify-center text-[13px] font-semibold text-[#606080] bg-[#0A0A0F] border-2 border-[#2A2A3E] font-mono"> |
| 38 | 4 |
| 39 | </div> |
| 40 | <span class="text-[10px] text-[#606080] uppercase tracking-wide"> |
| 41 | Review |
| 42 | </span> |
| 43 | </div> |
| 44 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex align-items-start justify-content-center gap-0 py-4" style="max-width:400px;margin:0 auto;"> |
| 2 | <div class="d-flex flex-column align-items-center gap-2" style="min-width:60px;"> |
| 3 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-semibold font-monospace" style="width:36px;height:36px;background:#00FF41;border:2px solid #00FF41;color:#0A0A0A;font-size:13px;"> |
| 4 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 5 | <polyline points="20 6 9 17 4 12"/> |
| 6 | </svg> |
| 7 | </div> |
| 8 | <span class="text-uppercase text-light" style="font-size:10px;letter-spacing:.5px;"> |
| 9 | Cart |
| 10 | </span> |
| 11 | </div> |
| 12 | <div style="width:40px;height:2px;background:#00FF41;margin-top:17px;"> |
| 13 | </div> |
| 14 | <div class="d-flex flex-column align-items-center gap-2" style="min-width:60px;"> |
| 15 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-semibold font-monospace" style="width:36px;height:36px;background:#00FF41;border:2px solid #00FF41;color:#0A0A0A;font-size:13px;"> |
| 16 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 17 | <polyline points="20 6 9 17 4 12"/> |
| 18 | </svg> |
| 19 | </div> |
| 20 | <span class="text-uppercase text-light" style="font-size:10px;letter-spacing:.5px;"> |
| 21 | Shipping |
| 22 | </span> |
| 23 | </div> |
| 24 | <div style="width:40px;height:2px;background:linear-gradient(90deg,#00FF41 50%,#2A2A3E 50%);margin-top:17px;"> |
| 25 | </div> |
| 26 | <div class="d-flex flex-column align-items-center gap-2" style="min-width:60px;"> |
| 27 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-semibold font-monospace" style="width:36px;height:36px;background:#0A0A0F;border:2px solid #00FF41;color:#00FF41;font-size:13px;box-shadow:0 0 0 4px rgba(0,255,65,.15);"> |
| 28 | 3 |
| 29 | </div> |
| 30 | <span class="text-uppercase text-light" style="font-size:10px;letter-spacing:.5px;"> |
| 31 | Payment |
| 32 | </span> |
| 33 | </div> |
| 34 | <div style="width:40px;height:2px;background:#2A2A3E;margin-top:17px;"> |
| 35 | </div> |
| 36 | <div class="d-flex flex-column align-items-center gap-2" style="min-width:60px;"> |
| 37 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-semibold font-monospace" style="width:36px;height:36px;background:#0A0A0F;border:2px solid #2A2A3E;color:#606080;font-size:13px;"> |
| 38 | 4 |
| 39 | </div> |
| 40 | <span class="text-uppercase text-secondary" style="font-size:10px;letter-spacing:.5px;"> |
| 41 | Review |
| 42 | </span> |
| 43 | </div> |
| 44 | </div> |
Step with Content
A stepped progress bar paired with step content and navigation buttons for a mini wizard.
step-content
Live
untitled.html
HTML
| 1 | <div class="wizard"> |
| 2 | <div class="progress-track"> |
| 3 | <div class="progress-fill" style="width:33%"> |
| 4 | </div> |
| 5 | </div> |
| 6 | <div class="steps-row"> |
| 7 | <span class="active"> |
| 8 | Account |
| 9 | </span> |
| 10 | <span class="active"> |
| 11 | Profile |
| 12 | </span> |
| 13 | <span> |
| 14 | Confirm |
| 15 | </span> |
| 16 | </div> |
| 17 | <div class="step-content"> |
| 18 | <div class="step-title"> |
| 19 | Step 2 of 3: Profile |
| 20 | </div> |
| 21 | <div class="step-desc"> |
| 22 | Tell us a bit about yourself. This helps us personalize your experience. |
| 23 | </div> |
| 24 | <div class="step-actions"> |
| 25 | <button class="btn ghost"> |
| 26 | Back |
| 27 | </button> |
| 28 | <button class="btn primary"> |
| 29 | Continue |
| 30 | </button> |
| 31 | </div> |
| 32 | </div> |
| 33 | </div> |
untitled.css
CSS
| 1 | .wizard { |
| 2 | max-width:400px; |
| 3 | margin:16px auto; |
| 4 | padding:16px |
| 5 | } |
| 6 | .progress-track { |
| 7 | width:100%; |
| 8 | height:4px; |
| 9 | background:#1A1A2E; |
| 10 | border-radius:2px; |
| 11 | overflow:hidden; |
| 12 | margin-bottom:12px |
| 13 | } |
| 14 | .progress-fill { |
| 15 | height:100%; |
| 16 | background:#00FF41; |
| 17 | border-radius:2px; |
| 18 | transition:width .4s ease |
| 19 | } |
| 20 | .steps-row { |
| 21 | display:flex; |
| 22 | justify-content:space-between; |
| 23 | font-size:11px; |
| 24 | color:#606080; |
| 25 | margin-bottom:20px |
| 26 | } |
| 27 | .steps-row .active { |
| 28 | color:#E0E0E0 |
| 29 | } |
| 30 | .step-content { |
| 31 | background:#0A0A0F; |
| 32 | border:1px solid #1A1A2E; |
| 33 | border-radius:10px; |
| 34 | padding:20px |
| 35 | } |
| 36 | .step-title { |
| 37 | font-size:14px; |
| 38 | font-weight:600; |
| 39 | color:#E0E0E0; |
| 40 | margin-bottom:6px |
| 41 | } |
| 42 | .step-desc { |
| 43 | font-size:12px; |
| 44 | color:#808090; |
| 45 | line-height:1.5; |
| 46 | margin-bottom:20px |
| 47 | } |
| 48 | .step-actions { |
| 49 | display:flex; |
| 50 | justify-content:flex-end; |
| 51 | gap:10px |
| 52 | } |
| 53 | .btn { |
| 54 | padding:8px 18px; |
| 55 | border-radius:6px; |
| 56 | font-size:12px; |
| 57 | font-weight:600; |
| 58 | font-family:system-ui, |
| 59 | sans-serif; |
| 60 | cursor:pointer; |
| 61 | border:none; |
| 62 | transition:all .2s |
| 63 | } |
| 64 | .btn.primary { |
| 65 | background:#00FF41; |
| 66 | color:#0A0A0A |
| 67 | } |
| 68 | .btn.primary:hover { |
| 69 | background:#00E63A |
| 70 | } |
| 71 | .btn.ghost { |
| 72 | background:transparent; |
| 73 | color:#808090; |
| 74 | border:1px solid #2A2A3E |
| 75 | } |
| 76 | .btn.ghost:hover { |
| 77 | color:#E0E0E0; |
| 78 | border-color:#3A3A4E |
| 79 | } |
untitled.html
HTML
| 1 | <div class="max-w-sm mx-auto p-4 bg-[#0A0A0A]"> |
| 2 | <div class="w-full h-1 bg-[#1A1A2E] rounded-[2px] overflow-hidden mb-3"> |
| 3 | <div class="h-full bg-[#00FF41] rounded-[2px] transition-all duration-400" style="width:33%"> |
| 4 | </div> |
| 5 | </div> |
| 6 | <div class="flex justify-between text-[11px] text-[#606080] mb-5"> |
| 7 | <span class="text-[#E0E0E0]"> |
| 8 | Account |
| 9 | </span> |
| 10 | <span class="text-[#E0E0E0]"> |
| 11 | Profile |
| 12 | </span> |
| 13 | <span> |
| 14 | Confirm |
| 15 | </span> |
| 16 | </div> |
| 17 | <div class="bg-[#0A0A0F] border border-[#1A1A2E] rounded-xl p-5"> |
| 18 | <div class="text-sm font-semibold text-[#E0E0E0] mb-1.5"> |
| 19 | Step 2 of 3: Profile |
| 20 | </div> |
| 21 | <div class="text-xs text-[#808090] leading-relaxed mb-5"> |
| 22 | Tell us a bit about yourself. This helps us personalize your experience. |
| 23 | </div> |
| 24 | <div class="flex justify-end gap-2.5"> |
| 25 | <button class="px-[18px] py-2 rounded-md text-xs font-semibold bg-transparent text-[#808090] border border-[#2A2A3E] hover:text-[#E0E0E0] hover:border-[#3A3A4E] transition-all"> |
| 26 | Back |
| 27 | </button> |
| 28 | <button class="px-[18px] py-2 rounded-md text-xs font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-all"> |
| 29 | Continue |
| 30 | </button> |
| 31 | </div> |
| 32 | </div> |
| 33 | </div> |
untitled.html
HTML
| 1 | <div class="container py-3" style="max-width:400px;"> |
| 2 | <div class="progress mb-3" style="height:4px;background:#1A1A2E;"> |
| 3 | <div class="progress-bar" role="progressbar" style="width:33%;background:#00FF41;" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"> |
| 4 | </div> |
| 5 | </div> |
| 6 | <div class="d-flex justify-content-between mb-4" style="font-size:11px;"> |
| 7 | <span class="text-light"> |
| 8 | Account |
| 9 | </span> |
| 10 | <span class="text-light"> |
| 11 | Profile |
| 12 | </span> |
| 13 | <span class="text-secondary"> |
| 14 | Confirm |
| 15 | </span> |
| 16 | </div> |
| 17 | <div class="p-4 rounded-3 border" style="background:#0A0A0F;border-color:#1A1A2E!important;"> |
| 18 | <div class="fw-semibold text-light mb-1" style="font-size:14px;"> |
| 19 | Step 2 of 3: Profile |
| 20 | </div> |
| 21 | <div class="mb-4" style="font-size:12px;color:#808090;line-height:1.5;"> |
| 22 | Tell us a bit about yourself. This helps us personalize your experience. |
| 23 | </div> |
| 24 | <div class="d-flex justify-content-end gap-2"> |
| 25 | <button class="btn btn-outline-secondary btn-sm" style="border-color:#2A2A3E;color:#808090;"> |
| 26 | Back |
| 27 | </button> |
| 28 | <button class="btn btn-success btn-sm fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A;"> |
| 29 | Continue |
| 30 | </button> |
| 31 | </div> |
| 32 | </div> |
| 33 | </div> |
🔥
pro tip
For multi-step forms, combine a stepped progress bar with a linear fill bar above it. The steps give semantic structure while the fill bar shows continuous progress between steps.
Inline Labeled Bar
Progress bars with the label inside the track — compact and ideal for dashboards and stat cards.
inline-label
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="bar-inline"> |
| 3 | <div class="bar-track"> |
| 4 | <div class="bar-fill" style="width:68%"> |
| 5 | <span class="bar-text"> |
| 6 | 68% Complete |
| 7 | </span> |
| 8 | </div> |
| 9 | </div> |
| 10 | </div> |
| 11 | <div class="bar-inline"> |
| 12 | <div class="bar-track"> |
| 13 | <div class="bar-fill warn" style="width:25%"> |
| 14 | <span class="bar-text"> |
| 15 | 25% |
| 16 | </span> |
| 17 | </div> |
| 18 | </div> |
| 19 | </div> |
| 20 | <div class="bar-inline"> |
| 21 | <div class="bar-track"> |
| 22 | <div class="bar-fill success" style="width:100%"> |
| 23 | <span class="bar-text"> |
| 24 | Done! |
| 25 | </span> |
| 26 | </div> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | max-width:420px; |
| 3 | margin:20px auto; |
| 4 | padding:16px; |
| 5 | display:flex; |
| 6 | flex-direction:column; |
| 7 | gap:14px |
| 8 | } |
| 9 | .bar-inline { |
| 10 | width:100% |
| 11 | } |
| 12 | .bar-track { |
| 13 | width:100%; |
| 14 | height:28px; |
| 15 | background:#1A1A2E; |
| 16 | border-radius:6px; |
| 17 | overflow:hidden |
| 18 | } |
| 19 | .bar-fill { |
| 20 | height:100%; |
| 21 | background:#00FF41; |
| 22 | border-radius:6px; |
| 23 | display:flex; |
| 24 | align-items:center; |
| 25 | padding:0 12px; |
| 26 | transition:width .6s ease; |
| 27 | min-width:fit-content |
| 28 | } |
| 29 | .bar-fill.warn { |
| 30 | background:#EAB308 |
| 31 | } |
| 32 | .bar-fill.success { |
| 33 | background:#22C55E |
| 34 | } |
| 35 | .bar-text { |
| 36 | font-size:11px; |
| 37 | font-weight:600; |
| 38 | color:#0A0A0A; |
| 39 | white-space:nowrap; |
| 40 | font-family:monospace |
| 41 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-3.5 max-w-md mx-auto p-5 bg-[#0A0A0A]"> |
| 2 | <div class="w-full h-7 bg-[#1A1A2E] rounded-md overflow-hidden"> |
| 3 | <div class="h-full bg-[#00FF41] rounded-md flex items-center px-3 transition-all duration-[600ms] min-w-fit" style="width:68%"> |
| 4 | <span class="text-[11px] font-semibold text-[#0A0A0A] whitespace-nowrap font-mono"> |
| 5 | 68% Complete |
| 6 | </span> |
| 7 | </div> |
| 8 | </div> |
| 9 | <div class="w-full h-7 bg-[#1A1A2E] rounded-md overflow-hidden"> |
| 10 | <div class="h-full bg-[#EAB308] rounded-md flex items-center px-3 transition-all duration-[600ms] min-w-fit" style="width:25%"> |
| 11 | <span class="text-[11px] font-semibold text-[#0A0A0A] whitespace-nowrap font-mono"> |
| 12 | 25% |
| 13 | </span> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="w-full h-7 bg-[#1A1A2E] rounded-md overflow-hidden"> |
| 17 | <div class="h-full bg-[#22C55E] rounded-md flex items-center px-3 transition-all duration-[600ms] min-w-fit" style="width:100%"> |
| 18 | <span class="text-[11px] font-semibold text-[#0A0A0A] whitespace-nowrap font-mono"> |
| 19 | Done! |
| 20 | </span> |
| 21 | </div> |
| 22 | </div> |
| 23 | </div> |
untitled.html
HTML
| 1 | <div class="container py-4" style="max-width:420px;"> |
| 2 | <div class="progress mb-3" style="height:28px;background:#1A1A2E;border-radius:6px;"> |
| 3 | <div class="progress-bar d-flex align-items-center ps-3 fw-semibold font-monospace" role="progressbar" style="width:68%;background:#00FF41;color:#0A0A0A;font-size:11px;" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"> |
| 4 | 68% Complete |
| 5 | </div> |
| 6 | </div> |
| 7 | <div class="progress mb-3" style="height:28px;background:#1A1A2E;border-radius:6px;"> |
| 8 | <div class="progress-bar d-flex align-items-center ps-3 fw-semibold font-monospace" role="progressbar" style="width:25%;background:#EAB308;color:#0A0A0A;font-size:11px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> |
| 9 | 25% |
| 10 | </div> |
| 11 | </div> |
| 12 | <div class="progress" style="height:28px;background:#1A1A2E;border-radius:6px;"> |
| 13 | <div class="progress-bar d-flex align-items-center ps-3 fw-semibold font-monospace" role="progressbar" style="width:100%;background:#22C55E;color:#0A0A0A;font-size:11px;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> |
| 14 | Done! |
| 15 | </div> |
| 16 | </div> |
| 17 | </div> |
Multi-Segment
Progress bars divided into colored segments showing different categories or stages of completion.
multi-segment
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="info"> |
| 3 | <span> |
| 4 | Storage Used: 73.2 GB of 100 GB |
| 5 | </span> |
| 6 | </div> |
| 7 | <div class="seg-track"> |
| 8 | <div class="seg images" style="width:30%"> |
| 9 | </div> |
| 10 | <div class="seg videos" style="width:25%"> |
| 11 | </div> |
| 12 | <div class="seg docs" style="width:12%"> |
| 13 | </div> |
| 14 | <div class="seg other" style="width:6%"> |
| 15 | </div> |
| 16 | </div> |
| 17 | <div class="legend"> |
| 18 | <span class="item"> |
| 19 | <span class="dot images"> |
| 20 | </span> |
| 21 | Images 30% |
| 22 | </span> |
| 23 | <span class="item"> |
| 24 | <span class="dot videos"> |
| 25 | </span> |
| 26 | Videos 25% |
| 27 | </span> |
| 28 | <span class="item"> |
| 29 | <span class="dot docs"> |
| 30 | </span> |
| 31 | Docs 12% |
| 32 | </span> |
| 33 | <span class="item"> |
| 34 | <span class="dot other"> |
| 35 | </span> |
| 36 | Other 6% |
| 37 | </span> |
| 38 | </div> |
| 39 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | max-width:420px; |
| 3 | margin:20px auto; |
| 4 | padding:16px |
| 5 | } |
| 6 | .info { |
| 7 | font-size:11px; |
| 8 | color:#A0A0A0; |
| 9 | font-family:monospace; |
| 10 | margin-bottom:8px |
| 11 | } |
| 12 | .seg-track { |
| 13 | width:100%; |
| 14 | height:14px; |
| 15 | background:#1A1A2E; |
| 16 | border-radius:7px; |
| 17 | overflow:hidden; |
| 18 | display:flex |
| 19 | } |
| 20 | .seg { |
| 21 | height:100%; |
| 22 | transition:width .6s ease |
| 23 | } |
| 24 | .seg:first-child { |
| 25 | border-radius:7px 0 0 7px |
| 26 | } |
| 27 | .seg:last-child { |
| 28 | border-radius:0 7px 7px 0 |
| 29 | } |
| 30 | .images { |
| 31 | background:#3B82F6 |
| 32 | } |
| 33 | .videos { |
| 34 | background:#A855F7 |
| 35 | } |
| 36 | .docs { |
| 37 | background:#22C55E |
| 38 | } |
| 39 | .other { |
| 40 | background:#606080 |
| 41 | } |
| 42 | .legend { |
| 43 | display:flex; |
| 44 | flex-wrap:wrap; |
| 45 | gap:12px; |
| 46 | margin-top:10px |
| 47 | } |
| 48 | .item { |
| 49 | display:flex; |
| 50 | align-items:center; |
| 51 | gap:5px; |
| 52 | font-size:10px; |
| 53 | color:#808090 |
| 54 | } |
| 55 | .dot { |
| 56 | width:8px; |
| 57 | height:8px; |
| 58 | border-radius:50%; |
| 59 | flex-shrink:0 |
| 60 | } |
untitled.html
HTML
| 1 | <div class="max-w-md mx-auto p-5 bg-[#0A0A0A]"> |
| 2 | <div class="text-[11px] text-[#A0A0A0] font-mono mb-2"> |
| 3 | Storage Used: 73.2 GB of 100 GB |
| 4 | </div> |
| 5 | <div class="w-full h-3.5 bg-[#1A1A2E] rounded-full overflow-hidden flex"> |
| 6 | <div class="h-full bg-[#3B82F6] transition-all duration-[600ms] rounded-l-full" style="width:30%"> |
| 7 | </div> |
| 8 | <div class="h-full bg-[#A855F7] transition-all duration-[600ms]" style="width:25%"> |
| 9 | </div> |
| 10 | <div class="h-full bg-[#22C55E] transition-all duration-[600ms]" style="width:12%"> |
| 11 | </div> |
| 12 | <div class="h-full bg-[#606080] transition-all duration-[600ms] rounded-r-full" style="width:6%"> |
| 13 | </div> |
| 14 | </div> |
| 15 | <div class="flex flex-wrap gap-3 mt-2.5"> |
| 16 | <span class="flex items-center gap-1.5 text-[10px] text-[#808090]"> |
| 17 | <span class="w-2 h-2 rounded-full bg-[#3B82F6]"> |
| 18 | </span> |
| 19 | Images 30% |
| 20 | </span> |
| 21 | <span class="flex items-center gap-1.5 text-[10px] text-[#808090]"> |
| 22 | <span class="w-2 h-2 rounded-full bg-[#A855F7]"> |
| 23 | </span> |
| 24 | Videos 25% |
| 25 | </span> |
| 26 | <span class="flex items-center gap-1.5 text-[10px] text-[#808090]"> |
| 27 | <span class="w-2 h-2 rounded-full bg-[#22C55E]"> |
| 28 | </span> |
| 29 | Docs 12% |
| 30 | </span> |
| 31 | <span class="flex items-center gap-1.5 text-[10px] text-[#808090]"> |
| 32 | <span class="w-2 h-2 rounded-full bg-[#606080]"> |
| 33 | </span> |
| 34 | Other 6% |
| 35 | </span> |
| 36 | </div> |
| 37 | </div> |
untitled.html
HTML
| 1 | <div class="container py-4" style="max-width:420px;"> |
| 2 | <div class="text-secondary font-monospace mb-2" style="font-size:11px;"> |
| 3 | Storage Used: 73.2 GB of 100 GB |
| 4 | </div> |
| 5 | <div class="progress" style="height:14px;background:#1A1A2E;border-radius:7px;"> |
| 6 | <div class="progress-bar" role="progressbar" style="width:30%;background:#3B82F6;border-radius:7px 0 0 7px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"> |
| 7 | </div> |
| 8 | <div class="progress-bar" role="progressbar" style="width:25%;background:#A855F7;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> |
| 9 | </div> |
| 10 | <div class="progress-bar" role="progressbar" style="width:12%;background:#22C55E;" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"> |
| 11 | </div> |
| 12 | <div class="progress-bar" role="progressbar" style="width:6%;background:#606080;border-radius:0 7px 7px 0;" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100"> |
| 13 | </div> |
| 14 | </div> |
| 15 | <div class="d-flex flex-wrap gap-3 mt-2"> |
| 16 | <span class="d-flex align-items-center gap-1 text-secondary" style="font-size:10px;"> |
| 17 | <span class="d-inline-block rounded-circle" style="width:8px;height:8px;background:#3B82F6;"> |
| 18 | </span> |
| 19 | Images 30% |
| 20 | </span> |
| 21 | <span class="d-flex align-items-center gap-1 text-secondary" style="font-size:10px;"> |
| 22 | <span class="d-inline-block rounded-circle" style="width:8px;height:8px;background:#A855F7;"> |
| 23 | </span> |
| 24 | Videos 25% |
| 25 | </span> |
| 26 | <span class="d-flex align-items-center gap-1 text-secondary" style="font-size:10px;"> |
| 27 | <span class="d-inline-block rounded-circle" style="width:8px;height:8px;background:#22C55E;"> |
| 28 | </span> |
| 29 | Docs 12% |
| 30 | </span> |
| 31 | <span class="d-flex align-items-center gap-1 text-secondary" style="font-size:10px;"> |
| 32 | <span class="d-inline-block rounded-circle" style="width:8px;height:8px;background:#606080;"> |
| 33 | </span> |
| 34 | Other 6% |
| 35 | </span> |
| 36 | </div> |
| 37 | </div> |
ℹ
info
Multi-segment bars are perfect for showing composition — storage usage, time allocation, budget breakdowns. Use a legend below the bar to map colors to categories.
With Status Icons
Progress rows paired with inline SVG status icons for faster visual parsing.
progress-icons
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="row"> |
| 3 | <svg class="icon ok" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 4 | <polyline points="20 6 9 17 4 12"/> |
| 5 | </svg> |
| 6 | <div class="bar"> |
| 7 | <div class="info"> |
| 8 | <span> |
| 9 | Database migration |
| 10 | </span> |
| 11 | <span> |
| 12 | 100% |
| 13 | </span> |
| 14 | </div> |
| 15 | <div class="track"> |
| 16 | <div class="fill" style="width:100%"> |
| 17 | </div> |
| 18 | </div> |
| 19 | </div> |
| 20 | </div> |
| 21 | <div class="row"> |
| 22 | <svg class="icon warn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 23 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 24 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 25 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 26 | </svg> |
| 27 | <div class="bar"> |
| 28 | <div class="info"> |
| 29 | <span> |
| 30 | Image optimization |
| 31 | </span> |
| 32 | <span> |
| 33 | 45% |
| 34 | </span> |
| 35 | </div> |
| 36 | <div class="track"> |
| 37 | <div class="fill warn" style="width:45%"> |
| 38 | </div> |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
| 42 | <div class="row"> |
| 43 | <svg class="icon err" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 44 | <circle cx="12" cy="12" r="10"/> |
| 45 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 46 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 47 | </svg> |
| 48 | <div class="bar"> |
| 49 | <div class="info"> |
| 50 | <span> |
| 51 | Video transcoding |
| 52 | </span> |
| 53 | <span> |
| 54 | Failed |
| 55 | </span> |
| 56 | </div> |
| 57 | <div class="track"> |
| 58 | <div class="fill err" style="width:12%"> |
| 59 | </div> |
| 60 | </div> |
| 61 | </div> |
| 62 | </div> |
| 63 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | max-width:420px; |
| 3 | margin:20px auto; |
| 4 | padding:16px; |
| 5 | display:flex; |
| 6 | flex-direction:column; |
| 7 | gap:16px |
| 8 | } |
| 9 | .row { |
| 10 | display:flex; |
| 11 | align-items:center; |
| 12 | gap:12px |
| 13 | } |
| 14 | .icon { |
| 15 | width:18px; |
| 16 | height:18px; |
| 17 | flex-shrink:0 |
| 18 | } |
| 19 | .icon.ok { |
| 20 | color:#22C55E |
| 21 | } |
| 22 | .icon.warn { |
| 23 | color:#EAB308 |
| 24 | } |
| 25 | .icon.err { |
| 26 | color:#EF4444 |
| 27 | } |
| 28 | .bar { |
| 29 | flex:1 |
| 30 | } |
| 31 | .info { |
| 32 | display:flex; |
| 33 | justify-content:space-between; |
| 34 | font-size:11px; |
| 35 | color:#A0A0A0; |
| 36 | font-family:monospace; |
| 37 | margin-bottom:6px |
| 38 | } |
| 39 | .track { |
| 40 | width:100%; |
| 41 | height:8px; |
| 42 | background:#1A1A2E; |
| 43 | border-radius:4px; |
| 44 | overflow:hidden |
| 45 | } |
| 46 | .fill { |
| 47 | height:100%; |
| 48 | background:#00FF41; |
| 49 | border-radius:4px; |
| 50 | transition:width .6s ease |
| 51 | } |
| 52 | .fill.warn { |
| 53 | background:#EAB308 |
| 54 | } |
| 55 | .fill.err { |
| 56 | background:#EF4444 |
| 57 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-4 max-w-md mx-auto p-5 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-center gap-3"> |
| 3 | <svg class="w-[18px] h-[18px] text-[#22C55E] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <polyline points="20 6 9 17 4 12"/> |
| 5 | </svg> |
| 6 | <div class="flex-1"> |
| 7 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono mb-1.5"> |
| 8 | <span> |
| 9 | Database migration |
| 10 | </span> |
| 11 | <span> |
| 12 | 100% |
| 13 | </span> |
| 14 | </div> |
| 15 | <div class="w-full h-2 bg-[#1A1A2E] rounded-full overflow-hidden"> |
| 16 | <div class="h-full bg-[#22C55E] rounded-full transition-all duration-[600ms]" style="width:100%"> |
| 17 | </div> |
| 18 | </div> |
| 19 | </div> |
| 20 | </div> |
| 21 | <div class="flex items-center gap-3"> |
| 22 | <svg class="w-[18px] h-[18px] text-[#EAB308] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 23 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 24 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 25 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 26 | </svg> |
| 27 | <div class="flex-1"> |
| 28 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono mb-1.5"> |
| 29 | <span> |
| 30 | Image optimization |
| 31 | </span> |
| 32 | <span> |
| 33 | 45% |
| 34 | </span> |
| 35 | </div> |
| 36 | <div class="w-full h-2 bg-[#1A1A2E] rounded-full overflow-hidden"> |
| 37 | <div class="h-full bg-[#EAB308] rounded-full transition-all duration-[600ms]" style="width:45%"> |
| 38 | </div> |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
| 42 | <div class="flex items-center gap-3"> |
| 43 | <svg class="w-[18px] h-[18px] text-[#EF4444] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 44 | <circle cx="12" cy="12" r="10"/> |
| 45 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 46 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 47 | </svg> |
| 48 | <div class="flex-1"> |
| 49 | <div class="flex justify-between text-[11px] text-[#A0A0A0] font-mono mb-1.5"> |
| 50 | <span> |
| 51 | Video transcoding |
| 52 | </span> |
| 53 | <span> |
| 54 | Failed |
| 55 | </span> |
| 56 | </div> |
| 57 | <div class="w-full h-2 bg-[#1A1A2E] rounded-full overflow-hidden"> |
| 58 | <div class="h-full bg-[#EF4444] rounded-full transition-all duration-[600ms]" style="width:12%"> |
| 59 | </div> |
| 60 | </div> |
| 61 | </div> |
| 62 | </div> |
| 63 | </div> |
untitled.html
HTML
| 1 | <div class="container py-4" style="max-width:420px;"> |
| 2 | <div class="d-flex align-items-center gap-3 mb-3"> |
| 3 | <svg class="flex-shrink-0" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2"> |
| 4 | <polyline points="20 6 9 17 4 12"/> |
| 5 | </svg> |
| 6 | <div class="flex-grow-1"> |
| 7 | <div class="d-flex justify-content-between mb-1"> |
| 8 | <small class="text-secondary font-monospace"> |
| 9 | Database migration |
| 10 | </small> |
| 11 | <small class="text-secondary font-monospace"> |
| 12 | 100% |
| 13 | </small> |
| 14 | </div> |
| 15 | <div class="progress" style="height:8px;background:#1A1A2E;"> |
| 16 | <div class="progress-bar" role="progressbar" style="width:100%;background:#22C55E;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> |
| 17 | </div> |
| 18 | </div> |
| 19 | </div> |
| 20 | </div> |
| 21 | <div class="d-flex align-items-center gap-3 mb-3"> |
| 22 | <svg class="flex-shrink-0" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#EAB308" stroke-width="2"> |
| 23 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 24 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 25 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 26 | </svg> |
| 27 | <div class="flex-grow-1"> |
| 28 | <div class="d-flex justify-content-between mb-1"> |
| 29 | <small class="text-secondary font-monospace"> |
| 30 | Image optimization |
| 31 | </small> |
| 32 | <small class="text-secondary font-monospace"> |
| 33 | 45% |
| 34 | </small> |
| 35 | </div> |
| 36 | <div class="progress" style="height:8px;background:#1A1A2E;"> |
| 37 | <div class="progress-bar" role="progressbar" style="width:45%;background:#EAB308;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"> |
| 38 | </div> |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
| 42 | <div class="d-flex align-items-center gap-3"> |
| 43 | <svg class="flex-shrink-0" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2"> |
| 44 | <circle cx="12" cy="12" r="10"/> |
| 45 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 46 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 47 | </svg> |
| 48 | <div class="flex-grow-1"> |
| 49 | <div class="d-flex justify-content-between mb-1"> |
| 50 | <small class="text-secondary font-monospace"> |
| 51 | Video transcoding |
| 52 | </small> |
| 53 | <small class="text-secondary font-monospace"> |
| 54 | Failed |
| 55 | </small> |
| 56 | </div> |
| 57 | <div class="progress" style="height:8px;background:#1A1A2E;"> |
| 58 | <div class="progress-bar" role="progressbar" style="width:12%;background:#EF4444;" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"> |
| 59 | </div> |
| 60 | </div> |
| 61 | </div> |
| 62 | </div> |
| 63 | </div> |
Accessibility
Progress indicators must communicate state to all users, including those using screen readers or keyboard navigation. Use the correct markup and ARIA attributes for each pattern.
- Use the native <progress> element when possible, or add role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax.
- Always expose the current value as visible text and in the accessible name.
- For indeterminate states, omit aria-valuenow or use aria-busy="true" on the relevant region.
- Do not rely on color alone — pair color variants with labels, icons, or percentages.
- Ensure animated stripes or spinners respect prefers-reduced-motion.
- Circular progress should include the percentage as text inside or next to the ring.
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.