37 Free Bootstrap Progress Bar Examples (2026)

By Aigars Silkalns · 24-min read

File uploads, multi-step forms, quiz progress, storage meters, course completion: a Bootstrap progress bar shows up wherever a user needs to know how much of something is done. This collection has 37 free Bootstrap progress bar examples: 12 progress components we designed in 2026, 22 curated Bootstrap 5.3 examples, and three more 2026 Colorlib snippets where a progress bar does real work inside a larger component.

The Colorlib set covers labelled and striped bars, checkout steps, SVG rings and semicircle gauges, a stacked storage bar, scroll-triggered skill bars, per-file upload progress, a reading bar, an indeterminate loader, a fundraising goal and dark KPI cards. Each is a free download with a live demo, written in plain HTML, CSS and vanilla JavaScript with no Bootstrap or jQuery required, and it looks the same on its own or inside a Bootstrap 4, 5 or 6 project. The three in-context examples are a grocery cart with a free-delivery bar, a multi-page survey and a multi-step job application.

The 22 curated examples are working Bootstrap 5.3 implementations of the canonical striped bar, contextual colors, stacked progress, upload patterns, SVG and conic-gradient rings, step wizards and indeterminate loaders. Each links to its original on CodePen, GitHub or the Bootstrap docs if you want to fork or compare.

What is a Bootstrap progress bar?

A Bootstrap progress bar is a visual indicator of how much of a task has been completed — file uploads, form-wizard steps, quiz progress, loading states. Bootstrap ships progress bars as flexible, accessible components that scale from a single percentage indicator to multi-segment stacked bars representing parallel processes.

When to use a progress bar:

• File uploads or downloads with measurable progress
• Multi-step forms (“Step 2 of 5”)
• Course or onboarding completion
• Quiz or survey progress
• Storage usage indicators
• Long-running background tasks (data sync, report generation)

Bootstrap 5 vs Bootstrap 4 progress bars: Bootstrap 5 simplified the markup slightly and added native ARIA attributes (role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax). The animated stripes (progress-bar-animated) now use a CSS-only animation rather than the Bootstrap 4 jQuery-based approach. Color variants follow Bootstrap’s standard contextual classes (success, info, warning, danger). Bootstrap 5.3 added the .progress-stacked wrapper for native multi-segment bars.

Progress bar vs spinner vs skeleton: Progress bars show measurable progress (you know what % is done). Spinners show indeterminate activity (something’s happening, time unknown). Skeleton loaders show content shape while data loads (the page renders structure before data arrives). Choosing the right one significantly improves perceived performance — see the comparison table further down for when to reach for each.

Browser support: All modern browsers (Chrome, Safari, Firefox, Edge) since 2021. Animations work everywhere Bootstrap 5 is supported. Circular progress bars (custom CSS / SVG) work everywhere SVG is supported. The newer CSS @property animated counter (item #13) requires Chrome 85+, Safari 16.4+, Firefox 128+.

How to use Bootstrap progress bars (basic markup)

<!-- Basic progress bar (60% complete) -->
<div class="progress" role="progressbar" aria-label="Basic example"
     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 60%">60%</div>
</div>

<!-- Striped + animated -->
<div class="progress" role="progressbar"
     aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
       style="width: 75%">75%</div>
</div>

<!-- Multi-segment stacked (Bootstrap 5.3+) -->
<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-valuenow="20" style="width: 20%">
    <div class="progress-bar bg-success">Done</div>
  </div>
  <div class="progress" role="progressbar" aria-valuenow="30" style="width: 30%">
    <div class="progress-bar bg-warning">In review</div>
  </div>
</div>

Required JS: None — progress bars are CSS-only by default. JavaScript is only needed for dynamic value updates.

Common gotcha: The width style on .progress-bar sets the actual visual progress. The aria-valuenow attribute is for screen readers only — they don’t sync automatically. Update both when changing progress programmatically.

Free Colorlib Bootstrap Progress Bar Snippets

We designed these 12 progress components in 2026: labelled and striped bars, checkout steps, SVG rings and gauges, upload lists, a reading bar and KPI cards. Each is a free download with a live demo and correct progressbar semantics.

Progress Bar V01: Clean labelled linear progress bars in several colours and sizes

A launch readiness card with one large overall bar, five medium workstream bars and four compact bars for docs and content. Every bar has a text label and a value, and colour modifiers mark done, on track, at risk and blocked. It fits project dashboards, onboarding checklists and status pages.

Best for: project dashboards and status summaries. Plain HTML and CSS, no JavaScript, a 529 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Progress Bar V02: Striped and animated striped progress bars

A deployment pipeline card with five stages shown as thick striped bars. Finished stages use static stripes, running stages have moving stripes and the queued stage shows an empty hatched track. The bold outlined style suits build tools, CI dashboards and anything that runs in steps.

Best for: CI/CD dashboards, build and deploy status pages. Plain HTML and CSS, no JavaScript, a 127 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Progress Bar V03: Checkout step progress with completed, current and upcoming states

A four-step checkout (Cart, Shipping, Payment, Review) with numbered step dots joined by a progress line, a form panel for each step and an order summary. Back and Next buttons move between steps, update the step states and move focus to the new step heading. It works as the top of any multi-step form or checkout flow.

Best for: e-commerce checkouts and multi-step forms. Plain HTML and CSS with a few lines of vanilla JavaScript, a 284 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Progress Bar V04: Circular SVG ring progress with the value in the centre

A weekly fitness goals panel built from SVG rings in three sizes: one large ring with the percentage in its centre, three medium rings for steps, workouts and sleep, and a row of small daily rings. A Sync tracker button animates every ring and its number to new values. The rings suit course completion, quotas and any goal tracking view.

Best for: fitness apps, course dashboards and goal trackers. Plain HTML and CSS with a few lines of vanilla JavaScript, a 164 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Progress Bar V05: Semicircle gauges with a needle and with a filled arc

Two gauge cards: a credit score dial with five coloured bands and a needle, and a server card with two arc gauges for CPU and memory load. The score card has a band legend with the current range highlighted, and the server card adds uptime, request rate and latency. It suits finance apps, monitoring dashboards and any value that sits on a scale.

Best for: finance apps and server monitoring dashboards. Plain HTML and CSS, no JavaScript, a 191 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Progress Bar V06: Stacked multi-segment storage bar with a legend

A disk usage panel with one bar split into six coloured segments for photos, videos, apps, documents, system data and other files. A legend with icons and sizes sits below, followed by a tip for freeing up space. It suits storage settings, cloud drive quotas and budget breakdowns.

Best for: storage settings and quota breakdowns. Plain HTML and CSS, no JavaScript, a 5 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Progress Bar V07: Skill bars that fill when scrolled into view

A dark portfolio about section with a short bio, key facts and two groups of skill bars, followed by a toolkit section further down the page. Each bar fills with a gradient and a knob once it scrolls into view, with a small stagger inside each group. Without JavaScript, or with reduced motion, the bars simply show their final values.

Best for: portfolio, resume and about pages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 154 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Progress Bar V08: File upload list with per-file progress and status

An upload panel with a drop zone and a list of files, each with a type badge, its own progress bar, bytes transferred and time left. Files can be uploading, done or failed, with cancel, retry and remove buttons, and a Simulate upload button adds three files, one of which fails. Choosing real files through the browse link runs the same simulated upload.

Best for: file managers, project tools and upload forms. Plain HTML and CSS with a few lines of vanilla JavaScript, a 202 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Progress Bar V09: Reading progress bar fixed to the top of an article

A long-form article page with a slim header fixed to the top that shows the site name, the article title and the minutes left. A thin gradient bar along the bottom edge of the header grows as the reader scrolls through the article and reports its value as a progressbar. It suits blogs, magazines, documentation and newsletters on the web.

Best for: blogs, magazines and long-form articles. Plain HTML and CSS with a few lines of vanilla JavaScript, a 930 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Progress Bar V10: Indeterminate linear loader and buffer bar with aria-busy

A transactions table with a thin indeterminate loading bar along its top edge and a buffer bar in the footer that shows downloaded rows running ahead of processed rows. While loading, the table region is marked aria-busy and its cells turn into shimmering skeleton blocks. The Load latest button runs the whole sequence, and the page simulates one load when it opens.

Best for: data tables, admin panels and media players. Plain HTML and CSS with a few lines of vanilla JavaScript, a 221 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Progress Bar V11: Fundraising goal progress with milestone markers

A crowdfunding card for a community garden with an illustrated header, the amount raised against the goal and a thick progress bar with four milestone markers. Milestone cards below show which targets are reached and how much is left to the next one, followed by backers, days left and a call to action. It suits charity appeals, crowdfunding pages and school or club fundraisers.

Best for: donation, crowdfunding and fundraiser pages. Plain HTML and CSS, no JavaScript, a 323 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Progress Bar V12: Dark dashboard KPI cards with progress against a target

A dark quarterly targets board with six KPI cards for revenue, customers, retention, pipeline, deal size and satisfaction. Each card shows the value, the change on last quarter, a status label and a small glowing bar with a tick that marks the target, so over-achievement is visible past the tick. It fits sales dashboards, OKR boards and admin panels.

Best for: sales dashboards, OKR and admin panels. Plain HTML and CSS, no JavaScript, a 534 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Best free Bootstrap progress bar examples

We grouped the 22 picks by use case rather than ranking them — every example below is a viable production starting point. Each screenshot shows our Bootstrap 5.3 implementation of the pattern, inspired by the original designer credited beneath. The “Original demo” link goes to the source pen or repository for those who want to fork, compare implementations, or see the author’s specific code style.

Showcase — visually distinctive progress designs

1. Neon Glassmorphism Progress

Frosted-glass backdrop with a vibrant neon-violet progress fill glowing on a dark productivity-tool background — the kind of polish you see in Linear, Raycast, or Vercel dashboards. Best fit for premium SaaS UIs where motion and depth signal product quality. Built with backdrop-filter: blur() on a translucent card, a gradient-filled .progress-bar, and a box-shadow glow that pulses via CSS keyframes. Browser support for backdrop-filter is universal in modern Chrome/Safari/Firefox (no Safari prefix needed since 2024). Provide a solid-color fallback for older browsers via @supports not (backdrop-filter: blur()).

Inspired by: digitalisstudios · License: MIT

Source & details Original demo

2. Gradient Score Meter

Multi-stop linear-gradient progress fill with an animated percentage tooltip that floats above the bar — a score-meter flair for product ratings, quiz results, and completion percentages. Best fit for gamified onboarding, learning platforms, and product-rating UIs where the score itself is the key information. Pure CSS gradient on the .progress-bar via background-image: linear-gradient(90deg, ...); the tooltip is an absolute-positioned element pinned to left: var(--percent) via CSS custom property. Update one CSS variable to move both the fill and the tooltip in lockstep.

Inspired by: mohan-aiyer · License: CodePen default (attribution required)

Source & details Original demo

3. Skill Bars Resume Style

Resume-style stacked skill bars — HTML at 95%, CSS at 85%, JavaScript at 75% — each with striped animation and inline percentage labels. Best fit for portfolio sites, resumes, and profile pages where the user wants to communicate skill depth at a glance. Pure Bootstrap 5.3 .progress-bar-striped.progress-bar-animated on stacked .progress containers with custom labels. Use a fade-in or width-from-0 transition on scroll for visual interest. The label uses position: absolute outside the bar to stay readable regardless of fill color.

Inspired by: Din73 · License: CodePen default (attribution required)

Source & details Original demo

4. Neon Glow Bar

Native HTML <progress> element styled with a neon glow box-shadow and gradient fill on a dark background. Best fit for landing pages, hero sections, and any context where the bar itself is a design element rather than a utility. Pure CSS — the native progress element is styled via ::-webkit-progress-bar and ::-webkit-progress-value pseudo-elements plus a Firefox fallback. Animate the value with JavaScript (progressEl.value = pct) or use a CSS-only width animation if the value is static. Pair with a glassmorphism card (#1) for full visual coherence.

Inspired by: kmrdev187 · License: CodePen default (attribution required)

Source & details Original demo

Linear progress bars — Bootstrap native variants

5. Default Progress Bar

The canonical Bootstrap 5 progress bar — .progress wrapper with role=”progressbar” and aria-value attributes, plus an inner .progress-bar at 75% width. Best fit as the baseline for every project: this is the markup every other progress pattern in this collection extends. Pure Bootstrap 5.3 with full ARIA attributes (aria-valuenow, aria-valuemin="0", aria-valuemax="100"). The inner bar’s width style is what sets the visual fill — update both width and aria-valuenow when changing progress programmatically (they don’t sync automatically).

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

6. Striped + Animated

Striped animated progress bar — diagonal stripes flowing right-to-left via CSS keyframes inside a standard Bootstrap 5 .progress wrapper. Best fit for active-state indicators: file uploads, background syncs, long-running tasks where the animation signals “still working.” Pure Bootstrap 5.3 — add .progress-bar-striped for the diagonal pattern and .progress-bar-animated for the rightward motion. The animation is a CSS-only @keyframes progress-bar-stripes rule. Respect prefers-reduced-motion: reduce by hiding the animation for users with vestibular sensitivities.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

7. Contextual Color Variants

Four contextual color variants stacked vertically — .bg-success green, .bg-info cyan, .bg-warning yellow, .bg-danger red — for semantic status communication on dashboards and status pages. Best fit for multi-task dashboards, batch-process status indicators, and storage-usage breakdowns where color carries meaning. Pure Bootstrap 5 contextual classes. The colors map to Bootstrap’s CSS variables (--bs-success, --bs-warning, etc.) so they re-tint correctly under data-bs-theme="dark". Pair color with a text label for accessibility — never rely on color alone.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

8. Height Variations

Three height variations — thin (4px), medium (16px), and tall (28px) — demonstrating size customization via inline style="height: Xpx" on the .progress wrapper. Best fit as a reference for sizing decisions: thin (4px) for reading-progress indicators, medium (16px) as the Bootstrap default, tall (28px) for hero-section progress with inline labels. Pure Bootstrap 5. Set height on the parent .progress element only — Bootstrap’s CSS auto-fills the inner bar to match. For a sticky-top reading-progress indicator, combine the 4px height with position: fixed; top: 0; z-index: 1030.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

9. With Inline Label

Progress bar with inline percentage label — 75% rendered inside the .progress-bar element in white text centered on the blue fill. Best fit when the percentage is the key information and the bar is wide enough to fit readable text (≥120px). Pure Bootstrap 5 — drop the percentage as text content inside the .progress-bar div. For low percentages (under ~15%) the label would clip outside the bar — switch to an external label or hide the label below a threshold. Update both the text and the width style when changing values dynamically.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

Circular progress (SVG & CSS)

10. SVG Circle with Percentage

Clean SVG circular progress — a single stroke-dasharray ring with the percentage rendered as centered text inside the circle. Best fit for dashboard widgets, profile completion indicators, and any context where the circular shape carries metaphorical weight (completion, fullness). Pure SVG with no JavaScript — stroke-dasharray="65, 100" sets the visible portion of the ring’s circumference. The path uses a relative d attribute that’s easy to copy and re-color. Pair with Bootstrap color tokens via stroke="var(--bs-primary)" for theme consistency.

Inspired by: JMChristensen · License: CodePen default (attribution required)

Source & details Original demo

11. Conic-Gradient Circular

Single HTML element circular progress — conic-gradient fill masked by a radial-gradient cutout creating a fully animated circular indicator with no SVG required. Best fit when you want a lightweight circular progress without the SVG markup, especially for dashboards rendering hundreds of progress dots. Pure CSS — background: conic-gradient(var(--bs-primary) calc(var(--p) * 1%), #eee 0) with a ::before pseudo-element overlaying the center. Update the --p custom property to animate. Browser support is universal in modern browsers (Chrome 88+, Safari 15+, Firefox 89+).

Inspired by: alvaromontoro · License: CodePen default (attribution required)

Source & details Original demo

12. Multi-Color Gradient Ring

Multi-color gradient ring — circular progress with hue shifting smoothly across the arc creating a striking glassy gradient indicator. Best fit for premium dashboards, fitness apps, and visualization-heavy interfaces (Strava, Apple Activity rings). Built with a CSS conic-gradient using multiple color stops to create the rainbow effect, masked by a radial cutout for the ring shape. The animated version uses @keyframes on the gradient angle to rotate the hue. Pair with a soft drop-shadow on the ring for additional depth.

Inspired by: estelatee · License: CodePen default (attribution required)

Source & details Original demo

13. @property Animated Counter

CSS @property animated circular progress — the ring fill and numeric counter count up together driven entirely by CSS without JavaScript. Best fit for landing-page hero stats, scroll-triggered metric reveals, and any context where motion-as-feedback signals “this number matters.” Uses the modern CSS @property rule to declare a typed custom property (<integer>) that CSS can animate — the trick is that browsers can only smoothly transition typed properties, not raw var() values. Browser support requires Chrome 85+, Safari 16.4+, Firefox 128+ (May 2024). Provide a JavaScript fallback for older browsers if needed.

Inspired by: Amit-Dash · License: CodePen default (attribution required)

Source & details Original demo

Stepped & wizard progress

14. Multi-Step Form Wizard

Multi-step form wizard — five numbered circular step indicators connected by a horizontal progress bar showing current position. Best fit for checkout flows, onboarding wizards, and any multi-step form where users need to see how much remains. Native Bootstrap 5 markup with custom step-circle CSS (border-radius: 50% on circles, ::before connecting line for the track). The active circle uses Bootstrap’s primary blue; completed steps get a checkmark icon. Wire the setStep(n) function from the brief to advance the indicator as users complete each step.

Inspired by: witty_code · License: CodePen default (attribution required)

Source & details Original demo

15. Dots + Lines Step Indicator

Dots-and-lines step indicator — numbered circles connected by lines with active-step highlighting via color shift on click. Best fit for tabbed multi-step content (settings panels, profile-setup flows) where users can jump between steps freely. Pure CSS for the dots and connecting lines using flexbox with justify-content: space-between and a horizontal line via ::before on the container. The active state toggles via a JavaScript click handler that updates an aria-current="step" attribute for screen reader support.

Inspired by: designify-me · License: CodePen default (attribution required)

Source & details Original demo

16. Vertical Timeline Process

Vertical timeline progress — alternating left/right step boxes with cyan numbered indicators and fade-in animations on scroll. Best fit for company timelines, process explanations, and how-it-works sections where each step deserves its own block of content. Bootstrap 5 grid (row, col-md-6) with custom timeline CSS for the central connecting line and numbered circle markers. The fade-in uses Intersection Observer or AOS.js triggered on scroll. Alternates left/right via :nth-child(even) for visual rhythm.

Inspired by: mdwaris198 · License: MIT (Bootsnipp default)

Source & details Original demo

17. Animated Step Transitions

Stepped wizard with selectable transitions — ScaleIn, SlideHorz, or FadeIn between steps, synced with a progress indicator above. Best fit for product configurators, customization wizards, and any multi-step UI where motion polish elevates the experience. Built on Bootstrap 5 with Animate.css or custom CSS keyframes for the transitions. The active transition is stored in localStorage so user preference persists. Each step’s opacity and transform animate via CSS, triggered by adding/removing an .active class on the step container.

Inspired by: nat-davydova · License: CodePen default (attribution required)

Source & details Original demo

Specialty patterns — upload, stacked, indeterminate

18. File Upload Progress

XHR-driven Bootstrap progress bar that widens with a live percentage label as the file uploads to the server — the canonical practical pattern. Best fit for any file-upload flow: avatar uploads, document attachments, media imports. Pure Bootstrap 5 markup with vanilla JavaScript XHR upload.addEventListener('progress', ...) handler. The loaded and total properties of the progress event give exact byte counts; divide for the percentage. On completion, swap the striped-animated bar for a static green success state. See the “File-upload progress” advanced pattern below for the full XHR + Bootstrap implementation.

Inspired by: PerfectIsShit · License: CodePen default (attribution required)

Source & details Original demo

19. Multi-Segment Stacked

Multi-segment stacked progress — Bootstrap 5.3’s new .progress-stacked wraps multiple .progress children so segments share a single rounded track. Best fit for disk-usage breakdowns (used / free / cache), budget allocations (spent / pending / remaining), and any quantity split across parallel categories. Native Bootstrap 5.3 — no custom CSS needed. Each segment is a separate .progress with its own width and color variant (.bg-success, .bg-warning, .bg-danger). The wrapper handles the unified rounded-corner treatment so segments visually connect.

Inspired by: Bootstrap (twbs) · License: MIT

Source & details Original demo

20. Reverse Countdown Timer

Reverse countdown timer — circular SVG with the stroke color transitioning green to orange to red as remaining time depletes. Best fit for quiz timers, time-limited offers, OTP-code expiration, and any countdown context where the color itself signals urgency. Uses SVG stroke-dasharray animated via JavaScript on a setInterval tick. Three CSS classes (.normal, .warning, .danger) trigger at the 50% and 25% remaining thresholds via JavaScript class toggle. Pair with a centered text element showing remaining seconds for precise feedback.

Inspired by: piyushpd139 · License: CodePen default (attribution required)

Source & details Original demo

21. Indeterminate Loader

Pure-CSS keyframe sliding bar with no fixed value — animates continuously as a true indeterminate progress indicator. Best fit when progress can’t be measured (server-side processing, awaiting external API response). Pure CSS — a ::before pseudo-element with animation: indeterminate 1.5s infinite linear slides from 0% to 100% inside the .progress container. No JavaScript required. This is the progress-bar equivalent of a spinner: use when you can’t calculate progress, prefer a real progress bar (#18) whenever you can compute it.

Inspired by: tmac · License: CodePen default (attribution required)

Source & details Original demo

22. Poll Comparison Bars

Three horizontally aligned progress bars per poll (25%, 55%, 20%) with text labels and tally counts — the comparison voting layout. Best fit for polls, survey-result pages, and any context comparing multiple values within a fixed total. Pure Bootstrap 5 markup with each option in a flex row: label on the left, bar in the middle, tally on the right. Color-code the leading option with .bg-primary and others with .bg-secondary for visual hierarchy. Update widths after submission via a single re-render — no animation needed for static result display.

Inspired by: ee92 · License: CodePen default (attribution required)

Source & details Original demo

Advanced Bootstrap progress bar patterns

Three patterns the listicle items above hint at but rarely demo as full working code. Each solves a specific production problem.

Pattern 1 — Dynamic file-upload progress with XHR. The most common practical use of progress bars. The browser’s XHR progress event gives loaded and total byte counts you can divide for the percentage. Update both width and aria-valuenow on every tick:

<input type="file" id="fileInput">
<div class="progress mt-2" role="progressbar"
     aria-valuemin="0" aria-valuemax="100" hidden>
  <div class="progress-bar progress-bar-striped progress-bar-animated"
       id="uploadBar" style="width: 0%"></div>
</div>

document.getElementById('fileInput').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  const progressEl = document.querySelector('.progress');
  const barEl = document.getElementById('uploadBar');
  progressEl.hidden = false;

  const xhr = new XMLHttpRequest();
  xhr.upload.addEventListener('progress', (evt) => {
    if (evt.lengthComputable) {
      const pct = Math.round((evt.loaded / evt.total) * 100);
      barEl.style.width = pct + '%';
      progressEl.setAttribute('aria-valuenow', pct);
      barEl.textContent = pct + '%';
    }
  });
  xhr.addEventListener('load', () => {
    barEl.classList.remove('progress-bar-animated', 'progress-bar-striped');
    barEl.classList.add('bg-success');
    barEl.textContent = 'Uploaded';
  });
  const fd = new FormData();
  fd.append('file', file);
  xhr.open('POST', '/upload');
  xhr.send(fd);
});

Pattern 2 — Step-based form wizard progress. Multi-step forms need progress indication. Map each step to a percentage and update on transition. The percentage formula ((step - 1) / (total - 1)) * 100 ensures step 1 shows 0% and the final step shows 100%:

<div class="progress" role="progressbar"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
  <div class="progress-bar bg-info" id="wizardProgress" style="width: 0%"></div>
</div>
<div class="d-flex justify-content-between mt-1 small">
  <span>Account</span>
  <span>Profile</span>
  <span>Preferences</span>
  <span>Confirm</span>
</div>

const TOTAL_STEPS = 4;
function setStep(currentStep) {
  const pct = ((currentStep - 1) / (TOTAL_STEPS - 1)) * 100;
  const bar = document.getElementById('wizardProgress');
  bar.style.width = pct + '%';
  bar.parentElement.setAttribute('aria-valuenow', pct);
}

Pattern 3 — Circular progress bar (custom CSS, BS-compatible). Bootstrap doesn’t ship a circular progress bar natively, but an SVG-based approach pairs cleanly with Bootstrap’s color tokens. The stroke-dasharray trick uses the path length (100 for the magic circle math below) to set the visible portion of the ring:

<div class="progress-circle" style="--progress: 65; --color: var(--bs-primary);">
  <svg viewBox="0 0 36 36" class="circular-chart">
    <path class="bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
    <path class="fg" stroke-dasharray="65, 100"
          d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
    <text x="18" y="20.5" class="percentage">65%</text>
  </svg>
</div>

.progress-circle .circular-chart { width: 120px; }
.progress-circle .bg { fill: none; stroke: var(--bs-gray-200); stroke-width: 3; }
.progress-circle .fg {
  fill: none;
  stroke: var(--color, var(--bs-primary));
  stroke-width: 3;
  stroke-linecap: round;
  animation: progress-fill 1s ease-out forwards;
}
.progress-circle .percentage { font-size: .5em; text-anchor: middle; }
@keyframes progress-fill { from { stroke-dasharray: 0 100; } }

Progress bar vs spinner vs skeleton — when to use which

	Progress bar	Spinner	Skeleton loader
What it shows	Measurable progress (0–100%)	Indeterminate activity	Content shape while data loads
User knows when it ends	Yes (via percentage)	No	Sort of (loads “when ready”)
Best for	File uploads, multi-step processes, quizzes	API calls, background tasks	Initial page or list rendering
Layout	Inline horizontal or circular	Small circular icon	Mimics final UI structure
Implementation	Bootstrap .progress	Bootstrap .spinner-border / .spinner-grow	Custom CSS (often animated gray boxes)
Perceived performance	High (visible progress)	Low (you wait)	High (visible structure)

When to choose what: Measurable task → progress bar. Quick API call (<2s) → spinner. Initial page or list render → skeleton. For longer indeterminate tasks (3–10s) where you genuinely can’t compute progress, use an indeterminate progress bar (#21) rather than a spinner — it visually commits more screen space, which signals “this might take a moment.”

More progress patterns inside 2026 Colorlib snippets

Progress indicators used inside other 2026 snippets: a free-delivery progress bar in a grocery cart, a multi-page survey and a multi-step job application.

Shopping Cart V10: Grocery basket grouped by aisle with a free-delivery progress bar

A grocery basket that groups items into aisles such as fruit and vegetables, bakery, dairy and pantry, with pack sizes and unit prices per kilogram, litre or piece. Each item has a substitution switch, and a master switch turns substitutes on or off for the whole basket. A progress bar in the sidebar shows how far the basket is from free delivery and tells the shopper exactly how much more to add.

Best for: grocery, meal kit and farm shop carts. Plain HTML and CSS with a few lines of vanilla JavaScript, a 129 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Survey Form V03: Multi-page survey with progress bar, back/next and a review page

A four-page rider survey for a made-up transit operator, with a step list in a dark side panel and a progress bar above the questions. Each page is checked before moving on, answers are kept when going back, and the last page lists every answer with an Edit button that jumps to it. On phones the side panel stacks on top and the steps become a compact row.

Best for: research surveys, onboarding questionnaires and any long form split into pages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 161 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Job Application Form V03: Multi-step application: Details, Experience, Questions, Review, with progress

A dark, four-step application for a made-up energy company's data analyst role. A numbered stepper with connecting lines and a gradient progress bar show where the applicant is, and each step is validated before moving on. The review step groups every answer by step with an Edit button that jumps straight back.

Best for: longer applications, graduate schemes and roles with screening questions. Plain HTML and CSS with a few lines of vanilla JavaScript, a 158 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.

More info / Download Demo

Frequently asked questions

Final thoughts

Bootstrap’s progress bar component is one of the most flexible primitives in the framework — it scales from a 4px reading-progress indicator pinned to the top of a blog post all the way up to a multi-segment storage breakdown in a dashboard widget. The picks worth committing to memory: the official striped+animated reference (#6) as your default for active states, the file-upload XHR pattern (#18) for any upload flow, the multi-step wizard (#14) for any onboarding or checkout, Bootstrap 5.3’s stacked progress (#19) for parallel-process indicators, and the SVG circular progress (#10) when you need the circular shape without pulling in a library.

For dependency-free versions of the same jobs, start with Progress Bar V03 for checkout steps, Progress Bar V04 for an SVG ring, Progress Bar V08 for per-file uploads and Progress Bar V09 for a reading bar.

If you’re building a multi-step form, pair these progress patterns with our Bootstrap form templates. For the file-upload flow specifically, see our Bootstrap file upload templates. For Bootstrap 5 status-feedback siblings, see our Bootstrap toast notifications and Bootstrap alerts.

Related collections: Bootstrap form templates · Bootstrap file uploads · Bootstrap toast notifications · Bootstrap alerts · Bootstrap contact form templates · Bootstrap buttons · Bootstrap cards · Free booking form templates · HTML5 login form templates · Bootstrap snippet library