Progress Bars
Bootstrap 5.3 .progress / .progress-bar with extra layouts: stacked segments, buffered tracks, milestones, gradients, vertical columns, skill rows, and cards. Tracks use var(--bs-secondary-bg) so light and dark themes stay balanced — use the navbar toggle to preview.
Accessible values
Set role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax, and optional aria-valuetext (for screen readers when a bare number is not enough). Match the visual width or height to aria-valuenow whenever the bar is determinate.
Basics — width steps
Default height comes from --bs-progress-height. Bar color defaults to the primary theme token unless you add .bg-*.
Heights — slim to chunky
Use inline style="height: …" or set --bs-progress-height on the track. Taller bars carry labels more comfortably.
Contextual — utility backgrounds
Bootstrap 5 uses .bg-primary, .bg-success, … instead of legacy .progress-bar-success.
Subtle fills
Pair .bg-*-subtle with .text-*-emphasis for quiet dashboards that still respect theme contrast in dark mode.
Labels — outside & inside
External rows keep typography independent of bar height; internal labels work best from ~1.25rem height upward.
Stacked — multiple segments
Place several .progress-bar elements in one .progress for budgets, blended metrics, or multi-source totals.
Buffered — filled + queued
Layer a translucent bar for “queued” or buffer ahead of playback, then the solid fill for completed progress.
Tip: for real media, wire aria-valuenow to loaded bytes and expose buffer separately via live region if needed.
Striped & animated
.progress-bar-striped plus .progress-bar-animated for motion (respect prefers-reduced-motion in production).
Indeterminate lane
Full-width striped animation reads as “working” when you do not have a numeric value yet.
Use role="status" + aria-live when the bar is decorative noise for assistive tech.
Outlined track
Borders and translucent backgrounds separate the track from the page in both themes.
Gradients & glow
Custom classes tune stops for light vs dark so neon reads cleanly on charcoal backgrounds.
Milestones
Dots align to a conceptual timeline; combine with stacked or single bars for onboarding checklists.
Skill matrix — labeled rows
Responsive grid: caption + bar share one row on large screens and stack neatly on small ones.
Vertical columns
Flip the flex axis; set bar height: N% and width: 100% (scoped helper handles width).
Icons inside the bar
Flex alignment keeps glyphs centered; choose bar heights ≥1.35rem for 1rem icons.
Cumulative levels
Same data as a leveled bar chart: each row is one .progress showing share of the whole.
Inside list group
Compact status rows for queues, sync jobs, or deploy pipelines.
-
Build #4821 Running
-
Asset sync Done
-
Lint pass Queued
Card hero with live quota
Combine copy and a single bold bar for upgrade prompts. The card uses default Bootstrap surfaces, so borders and shadows track data-bs-theme automatically.
Upgrade for pooled seats and higher rate limits.