|$ curl https://forge-ai.dev/api/markdown?path=docs/components/progress
$cat docs/progress-indicators.md
updated Recently·12 min read·published
Progress Indicators
Progress bars, circular indicators, stepped progress, indeterminate loaders, animated fills, and multi-step wizards.
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 | } |
| 8 | .progress-bar { |
| 9 | display:flex; |
| 10 | flex-direction:column; |
| 11 | gap:6px |
| 12 | } |
| 13 | .info { |
| 14 | display:flex; |
| 15 | justify-content:space-between; |
| 16 | font-size:11px; |
| 17 | color:#A0A0A0; |
| 18 | font-family:monospace |
| 19 | } |
| 20 | .track { |
| 21 | width:100%; |
| 22 | height:8px; |
| 23 | background:#1A1A2E; |
| 24 | border-radius:4px; |
| 25 | overflow:hidden |
| 26 | } |
| 27 | .fill { |
| 28 | height:100%; |
| 29 | background:#00FF41; |
| 30 | border-radius:4px; |
| 31 | transition:width .6s ease |
| 32 | } |
ℹ
info
Always show both the label and percentage when possible. Users find progress more reassuring when they can see exact numbers rather than just a moving bar.
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 | } |
| 8 | .progress-bar { |
| 9 | display:flex; |
| 10 | flex-direction:column; |
| 11 | gap:6px |
| 12 | } |
| 13 | .info { |
| 14 | display:flex; |
| 15 | justify-content:space-between; |
| 16 | font-size:11px; |
| 17 | color:#A0A0A0; |
| 18 | font-family:monospace |
| 19 | } |
| 20 | .track { |
| 21 | width:100%; |
| 22 | height:10px; |
| 23 | background:#1A1A2E; |
| 24 | border-radius:5px; |
| 25 | overflow:hidden |
| 26 | } |
| 27 | .fill { |
| 28 | height:100%; |
| 29 | border-radius:5px; |
| 30 | transition:width .6s ease; |
| 31 | background:#00FF41 |
| 32 | } |
| 33 | .striped { |
| 34 | background-image:linear-gradient(45deg, |
| 35 | rgba(255, |
| 36 | 255, |
| 37 | 255, |
| 38 | .1) 25%, |
| 39 | transparent 25%, |
| 40 | transparent 50%, |
| 41 | rgba(255, |
| 42 | 255, |
| 43 | 255, |
| 44 | .1) 50%, |
| 45 | rgba(255, |
| 46 | 255, |
| 47 | 255, |
| 48 | .1) 75%, |
| 49 | transparent 75%); |
| 50 | background-size:20px 20px |
| 51 | } |
| 52 | .animated { |
| 53 | animation:stripe-scroll 1s linear infinite |
| 54 | } |
| 55 | @keyframes stripe-scroll { |
| 56 | to { |
| 57 | background-position:20px 0 |
| 58 | } |
| 59 | } |
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 | } |
| 8 | .progress-bar { |
| 9 | display:flex; |
| 10 | flex-direction:column; |
| 11 | gap:6px |
| 12 | } |
| 13 | .info { |
| 14 | display:flex; |
| 15 | justify-content:space-between; |
| 16 | font-size:11px; |
| 17 | color:#A0A0A0; |
| 18 | font-family:monospace |
| 19 | } |
| 20 | .track { |
| 21 | width:100%; |
| 22 | height:8px; |
| 23 | background:#1A1A2E; |
| 24 | border-radius:4px; |
| 25 | overflow:hidden |
| 26 | } |
| 27 | .fill { |
| 28 | height:100%; |
| 29 | border-radius:4px; |
| 30 | transition:width .6s ease |
| 31 | } |
| 32 | .success { |
| 33 | background:#22C55E |
| 34 | } |
| 35 | .warning { |
| 36 | background:#EAB308 |
| 37 | } |
| 38 | .danger { |
| 39 | background:#EF4444 |
| 40 | } |
| 41 | .info-color { |
| 42 | background:#3B82F6 |
| 43 | } |
⚠
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.
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 | } |
| 8 | .progress-bar { |
| 9 | display:flex; |
| 10 | flex-direction:column; |
| 11 | gap:4px |
| 12 | } |
| 13 | .info { |
| 14 | display:flex; |
| 15 | justify-content:space-between; |
| 16 | font-size:11px; |
| 17 | color:#A0A0A0; |
| 18 | font-family:monospace |
| 19 | } |
| 20 | .track { |
| 21 | width:100%; |
| 22 | background:#1A1A2E; |
| 23 | border-radius:999px; |
| 24 | overflow:hidden |
| 25 | } |
| 26 | .thin { |
| 27 | height:4px |
| 28 | } |
| 29 | .track:not(.thin):not(.thick) { |
| 30 | height:8px |
| 31 | } |
| 32 | .thick { |
| 33 | height:16px |
| 34 | } |
| 35 | .fill { |
| 36 | height:100%; |
| 37 | background:#00FF41; |
| 38 | border-radius:999px; |
| 39 | transition:width .6s ease |
| 40 | } |
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 | } |
✓
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 | } |
| 8 | .lbl { |
| 9 | font-size:11px; |
| 10 | color:#A0A0A0; |
| 11 | font-family:monospace; |
| 12 | display:block; |
| 13 | margin-bottom:6px |
| 14 | } |
| 15 | .track { |
| 16 | width:100%; |
| 17 | height:6px; |
| 18 | background:#1A1A2E; |
| 19 | border-radius:3px; |
| 20 | overflow:hidden; |
| 21 | position:relative |
| 22 | } |
| 23 | .fill { |
| 24 | height:100%; |
| 25 | border-radius:3px; |
| 26 | position:absolute; |
| 27 | background:#00FF41 |
| 28 | } |
| 29 | .indeterminate { |
| 30 | width:40%; |
| 31 | animation:slide-bar 1.5s ease-in-out infinite |
| 32 | } |
| 33 | @keyframes slide-bar { |
| 34 | 0% { |
| 35 | left:-40% |
| 36 | } |
| 37 | 100% { |
| 38 | left:100% |
| 39 | } |
| 40 | } |
| 41 | .c-wrap { |
| 42 | display:flex; |
| 43 | gap:20px; |
| 44 | align-items:center; |
| 45 | justify-content:center |
| 46 | } |
| 47 | .spinner-ring { |
| 48 | width:48px; |
| 49 | height:48px; |
| 50 | transform:rotate(-90deg) |
| 51 | } |
| 52 | .spin-arc { |
| 53 | animation:spin-ring 1.2s linear infinite; |
| 54 | transform-origin:center |
| 55 | } |
| 56 | @keyframes spin-ring { |
| 57 | to { |
| 58 | transform:rotate(360deg) |
| 59 | } |
| 60 | } |
📝
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 | } |
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 | } |
| 5 | .progress-track { |
| 6 | width:100%; |
| 7 | height:4px; |
| 8 | background:#1A1A2E; |
| 9 | border-radius:2px; |
| 10 | overflow:hidden; |
| 11 | margin-bottom:12px |
| 12 | } |
| 13 | .progress-fill { |
| 14 | height:100%; |
| 15 | background:#00FF41; |
| 16 | border-radius:2px; |
| 17 | transition:width .4s ease |
| 18 | } |
| 19 | .steps-row { |
| 20 | display:flex; |
| 21 | justify-content:space-between; |
| 22 | font-size:11px; |
| 23 | color:#606080; |
| 24 | margin-bottom:20px |
| 25 | } |
| 26 | .steps-row .active { |
| 27 | color:#E0E0E0 |
| 28 | } |
| 29 | .step-content { |
| 30 | background:#0A0A0F; |
| 31 | border:1px solid #1A1A2E; |
| 32 | border-radius:10px; |
| 33 | padding:20px |
| 34 | } |
| 35 | .step-title { |
| 36 | font-size:14px; |
| 37 | font-weight:600; |
| 38 | color:#E0E0E0; |
| 39 | margin-bottom:6px |
| 40 | } |
| 41 | .step-desc { |
| 42 | font-size:12px; |
| 43 | color:#808090; |
| 44 | line-height:1.5; |
| 45 | margin-bottom:20px |
| 46 | } |
| 47 | .step-actions { |
| 48 | display:flex; |
| 49 | justify-content:flex-end; |
| 50 | gap:10px |
| 51 | } |
| 52 | .btn { |
| 53 | padding:8px 18px; |
| 54 | border-radius:6px; |
| 55 | font-size:12px; |
| 56 | font-weight:600; |
| 57 | font-family:system-ui, |
| 58 | sans-serif; |
| 59 | cursor:pointer; |
| 60 | border:none; |
| 61 | transition:all .2s |
| 62 | } |
| 63 | .btn.primary { |
| 64 | background:#00FF41; |
| 65 | color:#0A0A0A |
| 66 | } |
| 67 | .btn.primary:hover { |
| 68 | background:#00E63A |
| 69 | } |
| 70 | .btn.ghost { |
| 71 | background:transparent; |
| 72 | color:#808090; |
| 73 | border:1px solid #2A2A3E |
| 74 | } |
| 75 | .btn.ghost:hover { |
| 76 | color:#E0E0E0; |
| 77 | border-color:#3A3A4E |
| 78 | } |
🔥
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 | display:flex; |
| 5 | flex-direction:column; |
| 6 | gap:14px |
| 7 | } |
| 8 | .bar-inline { |
| 9 | width:100% |
| 10 | } |
| 11 | .bar-track { |
| 12 | width:100%; |
| 13 | height:28px; |
| 14 | background:#1A1A2E; |
| 15 | border-radius:6px; |
| 16 | overflow:hidden |
| 17 | } |
| 18 | .bar-fill { |
| 19 | height:100%; |
| 20 | background:#00FF41; |
| 21 | border-radius:6px; |
| 22 | display:flex; |
| 23 | align-items:center; |
| 24 | padding:0 12px; |
| 25 | transition:width .6s ease; |
| 26 | min-width:fit-content |
| 27 | } |
| 28 | .bar-fill.warn { |
| 29 | background:#EAB308 |
| 30 | } |
| 31 | .bar-fill.success { |
| 32 | background:#22C55E |
| 33 | } |
| 34 | .bar-text { |
| 35 | font-size:11px; |
| 36 | font-weight:600; |
| 37 | color:#0A0A0A; |
| 38 | white-space:nowrap; |
| 39 | font-family:monospace |
| 40 | } |
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 | } |
| 5 | .info { |
| 6 | font-size:11px; |
| 7 | color:#A0A0A0; |
| 8 | font-family:monospace; |
| 9 | margin-bottom:8px |
| 10 | } |
| 11 | .seg-track { |
| 12 | width:100%; |
| 13 | height:14px; |
| 14 | background:#1A1A2E; |
| 15 | border-radius:7px; |
| 16 | overflow:hidden; |
| 17 | display:flex |
| 18 | } |
| 19 | .seg { |
| 20 | height:100%; |
| 21 | transition:width .6s ease |
| 22 | } |
| 23 | .seg:first-child { |
| 24 | border-radius:7px 0 0 7px |
| 25 | } |
| 26 | .seg:last-child { |
| 27 | border-radius:0 7px 7px 0 |
| 28 | } |
| 29 | .images { |
| 30 | background:#3B82F6 |
| 31 | } |
| 32 | .videos { |
| 33 | background:#A855F7 |
| 34 | } |
| 35 | .docs { |
| 36 | background:#22C55E |
| 37 | } |
| 38 | .other { |
| 39 | background:#606080 |
| 40 | } |
| 41 | .legend { |
| 42 | display:flex; |
| 43 | flex-wrap:wrap; |
| 44 | gap:12px; |
| 45 | margin-top:10px |
| 46 | } |
| 47 | .item { |
| 48 | display:flex; |
| 49 | align-items:center; |
| 50 | gap:5px; |
| 51 | font-size:10px; |
| 52 | color:#808090 |
| 53 | } |
| 54 | .dot { |
| 55 | width:8px; |
| 56 | height:8px; |
| 57 | border-radius:50%; |
| 58 | flex-shrink:0 |
| 59 | } |
ℹ
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.