{"id":376430,"date":"2026-05-13T13:44:05","date_gmt":"2026-05-13T13:44:05","guid":{"rendered":"https:\/\/colorlib.com\/wp\/?p=376430"},"modified":"2026-05-13T13:44:05","modified_gmt":"2026-05-13T13:44:05","slug":"bootstrap-progress-bars","status":"publish","type":"post","link":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/","title":{"rendered":"22 Free Bootstrap Progress Bar Examples (2026)"},"content":{"rendered":"<p><em>By <a href=\"https:\/\/colorlib.com\/wp\/aigars-silkalns\/\" rel=\"author\">Aigars Silkalns<\/a> \u00b7 Last updated May 13, 2026 \u00b7 15-min read<\/em><\/p>\n\n<p>File uploads, multi-step forms, quiz progress, dashboard storage indicators, course completion meters \u2014 Bootstrap&#8217;s progress bar component shows up everywhere a user needs to know how much of something is done. This collection gathers 22 free Bootstrap 5\u2013compatible progress bar examples covering both the linear and circular intents: the canonical striped-animated bar, contextual color variants, multi-segment stacked progress (new in Bootstrap 5.3), file-upload XHR patterns, SVG circular rings, conic-gradient circular indicators, multi-step form wizards, vertical timeline processes, and indeterminate loaders. Every screenshot is a working Bootstrap 5.3 implementation; each example links to its original inspiration on CodePen, GitHub, or the Bootstrap docs for those who want to fork or compare. If you&#8217;re picking the right progress indicator for an upload flow, building a circular ring without a library, or just hunting for a polished progress style, start here.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"what-is\">What is a Bootstrap progress bar?<\/h2>\n\n<p>A Bootstrap progress bar is a visual indicator of how much of a task has been completed \u2014 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.<\/p>\n\n<p><strong>When to use a progress bar:<\/strong><\/p>\n\n<ul><li>File uploads or downloads with measurable progress<\/li><li>Multi-step forms (&#8220;Step 2 of 5&#8221;)<\/li><li>Course or onboarding completion<\/li><li>Quiz or survey progress<\/li><li>Storage usage indicators<\/li><li>Long-running background tasks (data sync, report generation)<\/li><\/ul>\n\n<p><strong>Bootstrap 5 vs Bootstrap 4 progress bars:<\/strong> Bootstrap 5 simplified the markup slightly and added native ARIA attributes (<code>role=\"progressbar\"<\/code>, <code>aria-valuenow<\/code>, <code>aria-valuemin<\/code>, <code>aria-valuemax<\/code>). The animated stripes (<code>progress-bar-animated<\/code>) now use a CSS-only animation rather than the Bootstrap 4 jQuery-based approach. Color variants follow Bootstrap&#8217;s standard contextual classes (<code>success<\/code>, <code>info<\/code>, <code>warning<\/code>, <code>danger<\/code>). Bootstrap 5.3 added the <code>.progress-stacked<\/code> wrapper for native multi-segment bars.<\/p>\n\n<p><strong>Progress bar vs spinner vs skeleton:<\/strong> Progress bars show <em>measurable<\/em> progress (you know what % is done). Spinners show <em>indeterminate<\/em> activity (something&#8217;s happening, time unknown). Skeleton loaders show <em>content shape<\/em> while data loads (the page renders structure before data arrives). Choosing the right one significantly improves perceived performance \u2014 see the comparison table further down for when to reach for each.<\/p>\n\n<p><strong>Browser support:<\/strong> 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 <code>@property<\/code> animated counter (item #13) requires Chrome 85+, Safari 16.4+, Firefox 128+.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"how-to-use\">How to use Bootstrap progress bars (basic markup)<\/h2>\n\n<pre class=\"wp-block-code\"><code class=\"language-html\">&lt;!-- Basic progress bar (60% complete) --&gt;\n&lt;div class=\"progress\" role=\"progressbar\" aria-label=\"Basic example\"\n     aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"&gt;\n  &lt;div class=\"progress-bar\" style=\"width: 60%\"&gt;60%&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;!-- Striped + animated --&gt;\n&lt;div class=\"progress\" role=\"progressbar\"\n     aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\"&gt;\n  &lt;div class=\"progress-bar progress-bar-striped progress-bar-animated bg-success\"\n       style=\"width: 75%\"&gt;75%&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;!-- Multi-segment stacked (Bootstrap 5.3+) --&gt;\n&lt;div class=\"progress-stacked\"&gt;\n  &lt;div class=\"progress\" role=\"progressbar\" aria-valuenow=\"20\" style=\"width: 20%\"&gt;\n    &lt;div class=\"progress-bar bg-success\"&gt;Done&lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"progress\" role=\"progressbar\" aria-valuenow=\"30\" style=\"width: 30%\"&gt;\n    &lt;div class=\"progress-bar bg-warning\"&gt;In review&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n<p><strong>Required JS:<\/strong> None \u2014 progress bars are CSS-only by default. JavaScript is only needed for dynamic value updates.<\/p>\n\n<p><strong>Common gotcha:<\/strong> The <code>width<\/code> style on <code>.progress-bar<\/code> sets the actual visual progress. The <code>aria-valuenow<\/code> attribute is for screen readers only \u2014 they don&#8217;t sync automatically. Update both when changing progress programmatically.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"examples\">Best free Bootstrap progress bar examples<\/h2>\n\n<p>We grouped the 22 picks by use case rather than ranking them \u2014 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 &#8220;Original demo&#8221; link goes to the source pen or repository for those who want to fork, compare implementations, or see the author&#8217;s specific code style.<\/p>\n\n<p><strong>Showcase \u2014 visually distinctive progress designs<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">1. Neon Glassmorphism Progress<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-glassmorphism-by-digitalisstudios.jpg\" alt=\"Neon glassmorphism progress bar \u2014 frosted glass backdrop with vibrant neon-purple progress fill glowing on a dark productivity-tool background\" \/><\/figure>\n<p>Frosted-glass backdrop with a vibrant neon-violet progress fill glowing on a dark productivity-tool background \u2014 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 <code>backdrop-filter: blur()<\/code> on a translucent card, a gradient-filled <code>.progress-bar<\/code>, and a <code>box-shadow<\/code> glow that pulses via CSS keyframes. Browser support for <code>backdrop-filter<\/code> is universal in modern Chrome\/Safari\/Firefox (no Safari prefix needed since 2024). Provide a solid-color fallback for older browsers via <code>@supports not (backdrop-filter: blur())<\/code>.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/digitalisstudios\" rel=\"nofollow noopener\" target=\"_blank\">digitalisstudios<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/digitalisstudios\/full\/VYeEZbe\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/digitalisstudios\/full\/VYeEZbe\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">2. Gradient Score Meter<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-gradient-by-mohan-aiyer.jpg\" alt=\"Gradient score meter \u2014 multi-stop linear-gradient progress bar with animated percentage tooltip floating above the fill\" \/><\/figure>\n<p>Multi-stop linear-gradient progress fill with an animated percentage tooltip that floats above the bar \u2014 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 <code>.progress-bar<\/code> via <code>background-image: linear-gradient(90deg, ...)<\/code>; the tooltip is an absolute-positioned element pinned to <code>left: var(--percent)<\/code> via CSS custom property. Update one CSS variable to move both the fill and the tooltip in lockstep.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/mohan-aiyer\" rel=\"nofollow noopener\" target=\"_blank\">mohan-aiyer<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/mohan-aiyer\/pen\/xxeEwRa\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/mohan-aiyer\/pen\/xxeEwRa\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">3. Skill Bars Resume Style<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-skill-bars-by-din73.jpg\" alt=\"Resume-style skill bars \u2014 striped animated horizontal bars showing HTML 95%, CSS 85%, JS 75% with inline percentage labels\" \/><\/figure>\n<p>Resume-style stacked skill bars \u2014 HTML at 95%, CSS at 85%, JavaScript at 75% \u2014 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 <code>.progress-bar-striped.progress-bar-animated<\/code> on stacked <code>.progress<\/code> containers with custom labels. Use a fade-in or width-from-0 transition on scroll for visual interest. The label uses <code>position: absolute<\/code> outside the bar to stay readable regardless of fill color.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/Din73\" rel=\"nofollow noopener\" target=\"_blank\">Din73<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/Din73\/pen\/dymjbqz\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/Din73\/pen\/dymjbqz\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">4. Neon Glow Bar<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-neon-glow-by-kmrdev187.jpg\" alt=\"Neon glow progress bar \u2014 native HTML progress element styled with neon glow box-shadow and gradient fill on dark background\" \/><\/figure>\n<p>Native HTML <code>&lt;progress&gt;<\/code> 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 \u2014 the native progress element is styled via <code>::-webkit-progress-bar<\/code> and <code>::-webkit-progress-value<\/code> pseudo-elements plus a Firefox fallback. Animate the value with JavaScript (<code>progressEl.value = pct<\/code>) or use a CSS-only width animation if the value is static. Pair with a glassmorphism card (#1) for full visual coherence.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/kmrdev187\" rel=\"nofollow noopener\" target=\"_blank\">kmrdev187<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/kmrdev187\/pen\/abJYmaB\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/kmrdev187\/pen\/abJYmaB\">Original demo<\/a><\/p>\n\n<p><strong>Linear progress bars \u2014 Bootstrap native variants<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">5. Default Progress Bar<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-default-by-bootstrap.jpg\" alt=\"Default Bootstrap progress bar \u2014 reference implementation with .progress wrapper and inner .progress-bar at 75% width with ARIA attributes\" \/><\/figure>\n<p>The canonical Bootstrap 5 progress bar \u2014 <code>.progress<\/code> wrapper with role=&#8221;progressbar&#8221; and aria-value attributes, plus an inner <code>.progress-bar<\/code> 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 (<code>aria-valuenow<\/code>, <code>aria-valuemin=\"0\"<\/code>, <code>aria-valuemax=\"100\"<\/code>). The inner bar&#8217;s <code>width<\/code> style is what sets the visual fill \u2014 update both <code>width<\/code> and <code>aria-valuenow<\/code> when changing progress programmatically (they don&#8217;t sync automatically).<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/progress\/\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/progress\/\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">6. Striped + Animated<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-striped-animated-by-bootstrap.jpg\" alt=\"Striped animated progress bar \u2014 diagonal stripes flowing right-to-left via CSS keyframes inside a standard Bootstrap 5 .progress wrapper\" \/><\/figure>\n<p>Striped animated progress bar \u2014 diagonal stripes flowing right-to-left via CSS keyframes inside a standard Bootstrap 5 <code>.progress<\/code> wrapper. Best fit for active-state indicators: file uploads, background syncs, long-running tasks where the animation signals &#8220;still working.&#8221; Pure Bootstrap 5.3 \u2014 add <code>.progress-bar-striped<\/code> for the diagonal pattern and <code>.progress-bar-animated<\/code> for the rightward motion. The animation is a CSS-only <code>@keyframes progress-bar-stripes<\/code> rule. Respect <code>prefers-reduced-motion: reduce<\/code> by hiding the animation for users with vestibular sensitivities.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/progress\/#striped\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/progress\/#striped\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">7. Contextual Color Variants<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-colors-by-bootstrap.jpg\" alt=\"Four contextual color variants stacked vertically \u2014 success green, info cyan, warning yellow, danger red progress bars for semantic status\" \/><\/figure>\n<p>Four contextual color variants stacked vertically \u2014 <code>.bg-success<\/code> green, <code>.bg-info<\/code> cyan, <code>.bg-warning<\/code> yellow, <code>.bg-danger<\/code> red \u2014 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&#8217;s CSS variables (<code>--bs-success<\/code>, <code>--bs-warning<\/code>, etc.) so they re-tint correctly under <code>data-bs-theme=\"dark\"<\/code>. Pair color with a text label for accessibility \u2014 never rely on color alone.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/progress\/#backgrounds\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/progress\/#backgrounds\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">8. Height Variations<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-heights-by-bootstrap.jpg\" alt=\"Three height variations \u2014 thin 4px, medium 16px, and tall 28px Bootstrap progress bars demonstrating size customization via inline styles\" \/><\/figure>\n<p>Three height variations \u2014 thin (4px), medium (16px), and tall (28px) \u2014 demonstrating size customization via inline <code>style=\"height: Xpx\"<\/code> on the <code>.progress<\/code> 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 <code>height<\/code> on the parent <code>.progress<\/code> element only \u2014 Bootstrap&#8217;s CSS auto-fills the inner bar to match. For a sticky-top reading-progress indicator, combine the 4px height with <code>position: fixed; top: 0; z-index: 1030<\/code>.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/progress\/#height\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/progress\/#height\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">9. With Inline Label<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-label-by-bootstrap.jpg\" alt=\"Progress bar with inline percentage label \u2014 75% rendered inside the bar element in white text centered on the blue fill\" \/><\/figure>\n<p>Progress bar with inline percentage label \u2014 75% rendered inside the <code>.progress-bar<\/code> 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 (\u2265120px). Pure Bootstrap 5 \u2014 drop the percentage as text content inside the <code>.progress-bar<\/code> div. For low percentages (under ~15%) the label would clip outside the bar \u2014 switch to an external label or hide the label below a threshold. Update both the text and the <code>width<\/code> style when changing values dynamically.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/progress\/#labels\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/progress\/#labels\">Original demo<\/a><\/p>\n\n<p><strong>Circular progress (SVG &amp; CSS)<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">10. SVG Circle with Percentage<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-svg-circle-by-jmchristensen.jpg\" alt=\"SVG circular progress \u2014 clean stroke-dasharray ring with 65% percentage rendered as centered text inside the circle\" \/><\/figure>\n<p>Clean SVG circular progress \u2014 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 \u2014 <code>stroke-dasharray=\"65, 100\"<\/code> sets the visible portion of the ring&#8217;s circumference. The path uses a relative <code>d<\/code> attribute that&#8217;s easy to copy and re-color. Pair with Bootstrap color tokens via <code>stroke=\"var(--bs-primary)\"<\/code> for theme consistency.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/JMChristensen\" rel=\"nofollow noopener\" target=\"_blank\">JMChristensen<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/JMChristensen\/pen\/AGbeEy\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/JMChristensen\/pen\/AGbeEy\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">11. Conic-Gradient Circular<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-conic-by-alvaromontoro.jpg\" alt=\"Conic-gradient circular progress \u2014 single HTML element with conic-gradient masked by radial-gradient creating a fully animated circular indicator\" \/><\/figure>\n<p>Single HTML element circular progress \u2014 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 \u2014 <code>background: conic-gradient(var(--bs-primary) calc(var(--p) * 1%), #eee 0)<\/code> with a <code>::before<\/code> pseudo-element overlaying the center. Update the <code>--p<\/code> custom property to animate. Browser support is universal in modern browsers (Chrome 88+, Safari 15+, Firefox 89+).<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/alvaromontoro\" rel=\"nofollow noopener\" target=\"_blank\">alvaromontoro<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/alvaromontoro\/pen\/LYjZqzP\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/alvaromontoro\/pen\/LYjZqzP\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">12. Multi-Color Gradient Ring<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-gradient-ring-by-estelatee.jpg\" alt=\"Multi-color gradient ring \u2014 circular progress with hue shifting across the arc creating a striking glassy gradient indicator for dashboards\" \/><\/figure>\n<p>Multi-color gradient ring \u2014 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 <code>conic-gradient<\/code> using multiple color stops to create the rainbow effect, masked by a radial cutout for the ring shape. The animated version uses <code>@keyframes<\/code> on the gradient angle to rotate the hue. Pair with a soft drop-shadow on the ring for additional depth.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/estelatee\" rel=\"nofollow noopener\" target=\"_blank\">estelatee<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/estelatee\/pen\/JvyeWO\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/estelatee\/pen\/JvyeWO\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">13. @property Animated Counter<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-property-animated-by-amit-dash.jpg\" alt=\"CSS @property animated circular counter \u2014 ring fill and numeric counter count up together driven entirely by CSS without JavaScript\" \/><\/figure>\n<p>CSS <code>@property<\/code> animated circular progress \u2014 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 &#8220;this number matters.&#8221; Uses the modern CSS <code>@property<\/code> rule to declare a typed custom property (<code>&lt;integer&gt;<\/code>) that CSS can animate \u2014 the trick is that browsers can only smoothly transition typed properties, not raw <code>var()<\/code> values. Browser support requires Chrome 85+, Safari 16.4+, Firefox 128+ (May 2024). Provide a JavaScript fallback for older browsers if needed.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/Amit-Dash\" rel=\"nofollow noopener\" target=\"_blank\">Amit-Dash<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/Amit-Dash\/pen\/VwoqBYN\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/Amit-Dash\/pen\/VwoqBYN\">Original demo<\/a><\/p>\n\n<p><strong>Stepped &amp; wizard progress<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">14. Multi-Step Form Wizard<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-step-wizard-by-witty-code.jpg\" alt=\"Multi-step form wizard \u2014 five numbered circular step indicators connected by a horizontal progress bar showing current position\" \/><\/figure>\n<p>Multi-step form wizard \u2014 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 (<code>border-radius: 50%<\/code> on circles, <code>::before<\/code> connecting line for the track). The active circle uses Bootstrap&#8217;s primary blue; completed steps get a checkmark icon. Wire the <code>setStep(n)<\/code> function from the brief to advance the indicator as users complete each step.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/witty_code\" rel=\"nofollow noopener\" target=\"_blank\">witty_code<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/witty_code\/pen\/VwVqVzW\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/witty_code\/pen\/VwVqVzW\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">15. Dots + Lines Step Indicator<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-dots-lines-by-designify-me.jpg\" alt=\"Dots and lines step indicator \u2014 numbered circles connected by lines with active step highlighting via color shift on click\" \/><\/figure>\n<p>Dots-and-lines step indicator \u2014 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 <code>justify-content: space-between<\/code> and a horizontal line via <code>::before<\/code> on the container. The active state toggles via a JavaScript click handler that updates an <code>aria-current=\"step\"<\/code> attribute for screen reader support.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/designify-me\" rel=\"nofollow noopener\" target=\"_blank\">designify-me<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/designify-me\/pen\/qrJWpG\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/designify-me\/pen\/qrJWpG\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">16. Vertical Timeline Process<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-vertical-timeline-by-mdwaris198.jpg\" alt=\"Vertical timeline process \u2014 alternating left\/right step boxes with cyan numbered indicators and fade-in animations on scroll\" \/><\/figure>\n<p>Vertical timeline progress \u2014 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 (<code>row<\/code>, <code>col-md-6<\/code>) 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 <code>:nth-child(even)<\/code> for visual rhythm.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/bootsnipp.com\/user\/mdwaris198\" rel=\"nofollow noopener\" target=\"_blank\">mdwaris198<\/a> \u00b7 License: MIT (Bootsnipp default)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/bootsnipp.com\/snippets\/4dlP3\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/bootsnipp.com\/snippets\/4dlP3\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">17. Animated Step Transitions<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-animated-stepper-by-nat-davydova.jpg\" alt=\"Animated step transitions \u2014 wizard with selectable ScaleIn, SlideHorz, FadeIn transitions between steps synced with progress indicator\" \/><\/figure>\n<p>Stepped wizard with selectable transitions \u2014 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&#8217;s <code>opacity<\/code> and <code>transform<\/code> animate via CSS, triggered by adding\/removing an <code>.active<\/code> class on the step container.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/nat-davydova\" rel=\"nofollow noopener\" target=\"_blank\">nat-davydova<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/nat-davydova\/pen\/PoYXZxg\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/nat-davydova\/pen\/PoYXZxg\">Original demo<\/a><\/p>\n\n<p><strong>Specialty patterns \u2014 upload, stacked, indeterminate<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">18. File Upload Progress<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-file-upload-by-perfectisshit.jpg\" alt=\"File upload progress \u2014 XHR-driven Bootstrap progress bar widening with live percentage label as the file uploads to server\" \/><\/figure>\n<p>XHR-driven Bootstrap progress bar that widens with a live percentage label as the file uploads to the server \u2014 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 <code>upload.addEventListener('progress', ...)<\/code> handler. The <code>loaded<\/code> and <code>total<\/code> 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 &#8220;File-upload progress&#8221; advanced pattern below for the full XHR + Bootstrap implementation.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/PerfectIsShit\" rel=\"nofollow noopener\" target=\"_blank\">PerfectIsShit<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/PerfectIsShit\/pen\/zogMXP\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/PerfectIsShit\/pen\/zogMXP\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">19. Multi-Segment Stacked<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-stacked-by-bootstrap.jpg\" alt=\"Multi-segment stacked progress \u2014 Bootstrap 5.3 .progress-stacked wrapping three .progress children sharing a single rounded track like a disk-usage archetype\" \/><\/figure>\n<p>Multi-segment stacked progress \u2014 Bootstrap 5.3&#8217;s new <code>.progress-stacked<\/code> wraps multiple <code>.progress<\/code> 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 \u2014 no custom CSS needed. Each segment is a separate <code>.progress<\/code> with its own width and color variant (<code>.bg-success<\/code>, <code>.bg-warning<\/code>, <code>.bg-danger<\/code>). The wrapper handles the unified rounded-corner treatment so segments visually connect.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/progress\/#multiple-bars\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/progress\/#multiple-bars\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">20. Reverse Countdown Timer<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-countdown-by-piyushpd139.jpg\" alt=\"Reverse countdown timer \u2014 circular SVG with stroke color transitioning green to orange to red as remaining time depletes\" \/><\/figure>\n<p>Reverse countdown timer \u2014 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 <code>stroke-dasharray<\/code> animated via JavaScript on a <code>setInterval<\/code> tick. Three CSS classes (<code>.normal<\/code>, <code>.warning<\/code>, <code>.danger<\/code>) trigger at the 50% and 25% remaining thresholds via JavaScript class toggle. Pair with a centered text element showing remaining seconds for precise feedback.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/piyushpd139\" rel=\"nofollow noopener\" target=\"_blank\">piyushpd139<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/piyushpd139\/pen\/qBqRmjg\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/piyushpd139\/pen\/qBqRmjg\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">21. Indeterminate Loader<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-indeterminate-by-tmac.jpg\" alt=\"Indeterminate loader \u2014 pure-CSS keyframe sliding bar with no fixed value, animating continuously as a true indeterminate progress indicator\" \/><\/figure>\n<p>Pure-CSS keyframe sliding bar with no fixed value \u2014 animates continuously as a true indeterminate progress indicator. Best fit when progress can&#8217;t be measured (server-side processing, awaiting external API response). Pure CSS \u2014 a <code>::before<\/code> pseudo-element with <code>animation: indeterminate 1.5s infinite linear<\/code> slides from 0% to 100% inside the <code>.progress<\/code> container. No JavaScript required. This is the progress-bar equivalent of a spinner: use when you can&#8217;t calculate progress, prefer a real progress bar (#18) whenever you can compute it.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/tmac\" rel=\"nofollow noopener\" target=\"_blank\">tmac<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/tmac\/pen\/QgVRKb\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/tmac\/pen\/QgVRKb\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">22. Poll Comparison Bars<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-poll-comparison-by-ee92.jpg\" alt=\"Poll comparison bars \u2014 three horizontally aligned bars at 25%, 55%, 20% with labels and tallies for a comparison voting layout\" \/><\/figure>\n<p>Three horizontally aligned progress bars per poll (25%, 55%, 20%) with text labels and tally counts \u2014 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 <code>.bg-primary<\/code> and others with <code>.bg-secondary<\/code> for visual hierarchy. Update widths after submission via a single re-render \u2014 no animation needed for static result display.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/ee92\" rel=\"nofollow noopener\" target=\"_blank\">ee92<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/ee92\/pen\/gzNqJZ\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/ee92\/pen\/gzNqJZ\">Original demo<\/a><\/p>\n\n<h2 class=\"wp-block-heading\" id=\"advanced-patterns\">Advanced Bootstrap progress bar patterns<\/h2>\n\n<p>Three patterns the listicle items above hint at but rarely demo as full working code. Each solves a specific production problem.<\/p>\n\n<p><strong>Pattern 1 \u2014 Dynamic file-upload progress with XHR.<\/strong> The most common practical use of progress bars. The browser&#8217;s XHR <code>progress<\/code> event gives <code>loaded<\/code> and <code>total<\/code> byte counts you can divide for the percentage. Update both <code>width<\/code> and <code>aria-valuenow<\/code> on every tick:<\/p>\n\n<pre class=\"wp-block-code\"><code class=\"language-html\">&lt;input type=\"file\" id=\"fileInput\"&gt;\n&lt;div class=\"progress mt-2\" role=\"progressbar\"\n     aria-valuemin=\"0\" aria-valuemax=\"100\" hidden&gt;\n  &lt;div class=\"progress-bar progress-bar-striped progress-bar-animated\"\n       id=\"uploadBar\" style=\"width: 0%\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n<pre class=\"wp-block-code\"><code class=\"language-javascript\">document.getElementById('fileInput').addEventListener('change', (e) =&gt; {\n  const file = e.target.files[0];\n  if (!file) return;\n  const progressEl = document.querySelector('.progress');\n  const barEl = document.getElementById('uploadBar');\n  progressEl.hidden = false;\n\n  const xhr = new XMLHttpRequest();\n  xhr.upload.addEventListener('progress', (evt) =&gt; {\n    if (evt.lengthComputable) {\n      const pct = Math.round((evt.loaded \/ evt.total) * 100);\n      barEl.style.width = pct + '%';\n      progressEl.setAttribute('aria-valuenow', pct);\n      barEl.textContent = pct + '%';\n    }\n  });\n  xhr.addEventListener('load', () =&gt; {\n    barEl.classList.remove('progress-bar-animated', 'progress-bar-striped');\n    barEl.classList.add('bg-success');\n    barEl.textContent = 'Uploaded';\n  });\n  const fd = new FormData();\n  fd.append('file', file);\n  xhr.open('POST', '\/upload');\n  xhr.send(fd);\n});<\/code><\/pre>\n\n<p><strong>Pattern 2 \u2014 Step-based form wizard progress.<\/strong> Multi-step forms need progress indication. Map each step to a percentage and update on transition. The percentage formula <code>((step - 1) \/ (total - 1)) * 100<\/code> ensures step 1 shows 0% and the final step shows 100%:<\/p>\n\n<pre class=\"wp-block-code\"><code class=\"language-html\">&lt;div class=\"progress\" role=\"progressbar\"\n     aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\"&gt;\n  &lt;div class=\"progress-bar bg-info\" id=\"wizardProgress\" style=\"width: 0%\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;div class=\"d-flex justify-content-between mt-1 small\"&gt;\n  &lt;span&gt;Account&lt;\/span&gt;\n  &lt;span&gt;Profile&lt;\/span&gt;\n  &lt;span&gt;Preferences&lt;\/span&gt;\n  &lt;span&gt;Confirm&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n<pre class=\"wp-block-code\"><code class=\"language-javascript\">const TOTAL_STEPS = 4;\nfunction setStep(currentStep) {\n  const pct = ((currentStep - 1) \/ (TOTAL_STEPS - 1)) * 100;\n  const bar = document.getElementById('wizardProgress');\n  bar.style.width = pct + '%';\n  bar.parentElement.setAttribute('aria-valuenow', pct);\n}<\/code><\/pre>\n\n<p><strong>Pattern 3 \u2014 Circular progress bar (custom CSS, BS-compatible).<\/strong> Bootstrap doesn&#8217;t ship a circular progress bar natively, but an SVG-based approach pairs cleanly with Bootstrap&#8217;s color tokens. The <code>stroke-dasharray<\/code> trick uses the path length (100 for the magic circle math below) to set the visible portion of the ring:<\/p>\n\n<pre class=\"wp-block-code\"><code class=\"language-html\">&lt;div class=\"progress-circle\" style=\"--progress: 65; --color: var(--bs-primary);\"&gt;\n  &lt;svg viewBox=\"0 0 36 36\" class=\"circular-chart\"&gt;\n    &lt;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\"\/&gt;\n    &lt;path class=\"fg\" stroke-dasharray=\"65, 100\"\n          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\"\/&gt;\n    &lt;text x=\"18\" y=\"20.5\" class=\"percentage\"&gt;65%&lt;\/text&gt;\n  &lt;\/svg&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n<pre class=\"wp-block-code\"><code class=\"language-css\">.progress-circle .circular-chart { width: 120px; }\n.progress-circle .bg { fill: none; stroke: var(--bs-gray-200); stroke-width: 3; }\n.progress-circle .fg {\n  fill: none;\n  stroke: var(--color, var(--bs-primary));\n  stroke-width: 3;\n  stroke-linecap: round;\n  animation: progress-fill 1s ease-out forwards;\n}\n.progress-circle .percentage { font-size: .5em; text-anchor: middle; }\n@keyframes progress-fill { from { stroke-dasharray: 0 100; } }<\/code><\/pre>\n\n<h2 class=\"wp-block-heading\" id=\"comparison\">Progress bar vs spinner vs skeleton \u2014 when to use which<\/h2>\n\n<figure class=\"wp-block-table\"><table><thead><tr><th><\/th><th>Progress bar<\/th><th>Spinner<\/th><th>Skeleton loader<\/th><\/tr><\/thead><tbody>\n<tr><th>What it shows<\/th><td>Measurable progress (0\u2013100%)<\/td><td>Indeterminate activity<\/td><td>Content shape while data loads<\/td><\/tr>\n<tr><th>User knows when it ends<\/th><td>Yes (via percentage)<\/td><td>No<\/td><td>Sort of (loads &#8220;when ready&#8221;)<\/td><\/tr>\n<tr><th>Best for<\/th><td>File uploads, multi-step processes, quizzes<\/td><td>API calls, background tasks<\/td><td>Initial page or list rendering<\/td><\/tr>\n<tr><th>Layout<\/th><td>Inline horizontal or circular<\/td><td>Small circular icon<\/td><td>Mimics final UI structure<\/td><\/tr>\n<tr><th>Implementation<\/th><td>Bootstrap <code>.progress<\/code><\/td><td>Bootstrap <code>.spinner-border<\/code> \/ <code>.spinner-grow<\/code><\/td><td>Custom CSS (often animated gray boxes)<\/td><\/tr>\n<tr><th>Perceived performance<\/th><td>High (visible progress)<\/td><td>Low (you wait)<\/td><td>High (visible structure)<\/td><\/tr>\n<\/tbody><\/table><\/figure>\n\n<p><strong>When to choose what:<\/strong> Measurable task \u2192 <strong>progress bar<\/strong>. Quick API call (&lt;2s) \u2192 <strong>spinner<\/strong>. Initial page or list render \u2192 <strong>skeleton<\/strong>. For longer indeterminate tasks (3\u201310s) where you genuinely can&#8217;t compute progress, use an indeterminate progress bar (#21) rather than a spinner \u2014 it visually commits more screen space, which signals &#8220;this might take a moment.&#8221;<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"faq\">Frequently asked questions<\/h2>\n\n\n<style>\n.faq-accordion{margin:28px 0 36px}\n.faq-accordion details{background:#fff;border:1px solid #e6e9ec;border-radius:10px;margin-bottom:12px;transition:box-shadow .18s ease,border-color .18s ease;overflow:hidden}\n.faq-accordion details:hover{border-color:#cfd6dc;box-shadow:0 4px 14px rgba(15,23,42,.05)}\n.faq-accordion details[open]{border-color:#cfd6dc;box-shadow:0 6px 20px rgba(15,23,42,.06)}\n.faq-accordion summary{cursor:pointer;padding:18px 56px 18px 22px;font-weight:600;font-size:1.02rem;line-height:1.45;position:relative;list-style:none;color:#0f172a;transition:color .15s ease}\n.faq-accordion summary::-webkit-details-marker{display:none}\n.faq-accordion summary::marker{display:none}\n.faq-accordion summary::after{content:\"\";position:absolute;right:22px;top:50%;width:14px;height:14px;border-right:2px solid #64748b;border-bottom:2px solid #64748b;transform:translateY(-70%) rotate(45deg);transition:transform .2s ease,border-color .15s ease}\n.faq-accordion details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:#2563eb}\n.faq-accordion summary:hover{color:#2563eb}\n.faq-accordion summary:focus-visible{outline:2px solid #2563eb;outline-offset:-2px;border-radius:8px}\n.faq-accordion details>*:not(summary){padding:0 22px 18px 22px;margin-top:0}\n.faq-accordion details>p,.faq-accordion details>div{padding:14px 22px 18px 22px;border-top:1px solid #f1f5f9;margin:0;line-height:1.65;color:#475569}\n.faq-accordion details code{background:#f1f5f9;padding:2px 7px;border-radius:4px;font-size:.9em;color:#be185d;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}\n.faq-accordion details a{color:#2563eb;text-decoration:underline;text-underline-offset:2px}\n<\/style>\n<div class=\"faq-accordion\">\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" open><summary>How do I animate a Bootstrap progress bar?<\/summary><p>Add the <code>progress-bar-striped<\/code> and <code>progress-bar-animated<\/code> classes to the inner <code>.progress-bar<\/code> element: <code>&lt;div class=\"progress-bar progress-bar-striped progress-bar-animated\" style=\"width: 60%\"&gt;&lt;\/div&gt;<\/code>. The striped pattern is created via CSS gradient, and the animation moves the stripes via the <code>progress-bar-stripes<\/code> keyframe. No JavaScript required. Respect <code>prefers-reduced-motion: reduce<\/code> by hiding the animation for users with vestibular sensitivities.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How do I update a Bootstrap progress bar dynamically with JavaScript?<\/summary><p>Update the <code>width<\/code> style on the inner <code>.progress-bar<\/code> element and the <code>aria-valuenow<\/code> attribute on the parent <code>.progress<\/code>: <code>const bar = document.querySelector('.progress-bar'); bar.style.width = '75%'; bar.parentElement.setAttribute('aria-valuenow', 75);<\/code>. Always update both \u2014 <code>width<\/code> is for visual rendering, <code>aria-valuenow<\/code> is for screen readers.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How do I create a circular progress bar in Bootstrap?<\/summary><p>Bootstrap doesn&#8217;t ship a native circular progress bar, but you can build one with SVG using two overlapping circular paths and a <code>stroke-dasharray<\/code> value that maps to your percentage. Pair this with Bootstrap&#8217;s color tokens (<code>var(--bs-primary)<\/code>) for consistency. See Pattern 3 in the advanced patterns above for the full code. For a JavaScript-free animated version, use the CSS <code>@property<\/code> approach demonstrated in item #13.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How do I make a Bootstrap progress bar taller or shorter?<\/summary><p>Set the <code>height<\/code> style on the parent <code>.progress<\/code> element: <code>&lt;div class=\"progress\" style=\"height: 24px;\"&gt;<\/code>. Bootstrap&#8217;s default height is 1rem (16px). Avoid setting height on the inner <code>.progress-bar<\/code> directly \u2014 it inherits from the parent. For thin progress bars (reading-progress indicators), use heights as small as 2\u20134px combined with <code>position: fixed; top: 0<\/code> for a sticky reading-progress effect.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>What&#8217;s the difference between a progress bar and a spinner?<\/summary><p>A progress bar shows measurable progress (e.g., file upload at 65%) \u2014 the user knows how much remains. A spinner shows indeterminate activity (something is happening, duration unknown). Use a progress bar when you can calculate progress; use a spinner for short tasks (under 2 seconds) where progress reporting would be more confusing than helpful. For longer indeterminate tasks, use an indeterminate progress bar (#21) instead of a spinner.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How do I show multiple values on a single Bootstrap progress bar?<\/summary><p>Use the <code>.progress-stacked<\/code> wrapper (Bootstrap 5.3+) with multiple <code>.progress<\/code> elements inside, each with its own width. This creates a multi-segment stacked bar \u2014 useful for showing parallel processes, multi-status work queues, storage breakdowns, or budget allocations. Each segment can have its own color variant (<code>bg-success<\/code>, <code>bg-warning<\/code>, etc.). See item #19 in this collection for the canonical example.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Are these Bootstrap progress bar examples free for commercial use?<\/summary><p>Yes \u2014 every example in this collection uses an MIT, Apache 2.0, or CodePen-default license, which permits commercial use including in client projects and SaaS products. Our Bootstrap 5.3 implementations are released under MIT; the original inspirations are linked for those who want to verify each source pen&#8217;s specific license terms.<\/p><\/details>\n\n\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"final-thoughts\">Final thoughts<\/h2>\n\n<p>Bootstrap&#8217;s progress bar component is one of the most flexible primitives in the framework \u2014 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&#8217;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.<\/p>\n\n<p>If you&#8217;re building a multi-step form, pair these progress patterns with our <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-form-templates\/\">Bootstrap form templates<\/a>. For the file-upload flow specifically, see our <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-file-uploads\/\">Bootstrap file upload templates<\/a>. For Bootstrap 5 status-feedback siblings, see our <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-toasts\/\">Bootstrap toast notifications<\/a> and <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-alerts\/\">Bootstrap alerts<\/a>.<\/p>\n\n<p><strong>Related collections:<\/strong> <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-form-templates\/\">Bootstrap form templates<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-file-uploads\/\">Bootstrap file uploads<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-toasts\/\">Bootstrap toast notifications<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-alerts\/\">Bootstrap alerts<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-contact-form\/\">Bootstrap contact form templates<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-buttons\/\">Bootstrap buttons<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-cards\/\">Bootstrap cards<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/free-booking-form-templates\/\">Free booking form templates<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/html5-and-css3-login-forms\/\">HTML5 login form templates<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/category\/snippets\/\">Bootstrap snippet library<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>22 free Bootstrap progress bar examples \u2014 striped, animated, multi-segment, file-upload patterns. Bootstrap 5 with code samples. (2026)<\/p>\n","protected":false},"author":697,"featured_media":376387,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"bootstrap progress bar","_yoast_wpseo_title":"22 Free Bootstrap Progress Bar Examples (2026)","_yoast_wpseo_metadesc":"22 free Bootstrap progress bar examples \u2014 striped, animated, multi-segment, file-upload patterns. Bootstrap 5 with code samples. (2026)","footnotes":""},"categories":[27213],"tags":[],"post_series":[],"class_list":{"2":"type-post","3":"status-publish","6":"hentry","7":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>22 Free Bootstrap Progress Bar Examples (2026)<\/title>\n<meta name=\"description\" content=\"22 free Bootstrap progress bar examples \u2014 striped, animated, multi-segment, file-upload patterns. Bootstrap 5 with code samples. (2026)\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"22 Free Bootstrap Progress Bar Examples (2026)\" \/>\n<meta property=\"og:description\" content=\"22 free Bootstrap progress bar examples \u2014 striped, animated, multi-segment, file-upload patterns. Bootstrap 5 with code samples. (2026)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/\" \/>\n<meta property=\"og:site_name\" content=\"Colorlib\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/colorlib\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/silkalns\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-13T13:44:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-bars-examples-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Aigars Silkalns\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ASilkalns\" \/>\n<meta name=\"twitter:site\" content=\"@colorlib\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aigars Silkalns\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-progress-bars\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-progress-bars\\\/\"},\"author\":{\"name\":\"Aigars Silkalns\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/person\\\/0f34837e738805c94d594780f27e3c7a\"},\"headline\":\"22 Free Bootstrap Progress Bar Examples (2026)\",\"datePublished\":\"2026-05-13T13:44:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-progress-bars\\\/\"},\"wordCount\":3332,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-progress-bars\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bootstrap-progress-bars-examples-featured.jpg\",\"articleSection\":[\"Snippets\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-progress-bars\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-progress-bars\\\/\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-progress-bars\\\/\",\"name\":\"22 Free Bootstrap Progress Bar Examples (2026)\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-progress-bars\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-progress-bars\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bootstrap-progress-bars-examples-featured.jpg\",\"datePublished\":\"2026-05-13T13:44:05+00:00\",\"description\":\"22 free Bootstrap progress bar examples \u2014 striped, animated, multi-segment, file-upload patterns. Bootstrap 5 with code samples. (2026)\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-progress-bars\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-progress-bars\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-progress-bars\\\/#primaryimage\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bootstrap-progress-bars-examples-featured.jpg\",\"contentUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bootstrap-progress-bars-examples-featured.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Grid of four free Bootstrap progress bar examples \u2014 neon glassmorphism bar, CSS animated circular counter, multi-step form wizard, and stacked multi-segment progress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-progress-bars\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Snippets\",\"item\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/category\\\/snippets\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"22 Free Bootstrap Progress Bar Examples (2026)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\",\"name\":\"Colorlib\",\"description\":\"WordPress tutorials, theme reviews, and web design inspiration. Free themes and 1,000+ HTML templates from Colorlib.\",\"publisher\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\",\"name\":\"Colorlib\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/colorlib-logo-top-1.png\",\"contentUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/colorlib-logo-top-1.png\",\"width\":800,\"height\":400,\"caption\":\"Colorlib\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/colorlib\",\"https:\\\/\\\/x.com\\\/colorlib\",\"https:\\\/\\\/www.instagram.com\\\/colorlib\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/colorlib\",\"https:\\\/\\\/youtube.com\\\/c\\\/Colorlib\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/person\\\/0f34837e738805c94d594780f27e3c7a\",\"name\":\"Aigars Silkalns\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"caption\":\"Aigars Silkalns\"},\"description\":\"Frontend web developer and web designer specializing in WordPress theme development. After graduating with BA he self-taught frontend web development. Currently has over 10 years of experience in mainly CSS, HTML (TailwindCSS, Bootstrap), JavaScript(React, Vue, Angular), and PHP. Obsessed with application performance, user experience, and simplicity.\",\"sameAs\":[\"https:\\\/\\\/colorlib.com\\\/\",\"https:\\\/\\\/facebook.com\\\/silkalns\",\"https:\\\/\\\/x.com\\\/ASilkalns\"],\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/author\\\/aigars-silkalns\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"22 Free Bootstrap Progress Bar Examples (2026)","description":"22 free Bootstrap progress bar examples \u2014 striped, animated, multi-segment, file-upload patterns. Bootstrap 5 with code samples. (2026)","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/","og_locale":"en_US","og_type":"article","og_title":"22 Free Bootstrap Progress Bar Examples (2026)","og_description":"22 free Bootstrap progress bar examples \u2014 striped, animated, multi-segment, file-upload patterns. Bootstrap 5 with code samples. (2026)","og_url":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/","og_site_name":"Colorlib","article_publisher":"https:\/\/www.facebook.com\/colorlib","article_author":"https:\/\/facebook.com\/silkalns","article_published_time":"2026-05-13T13:44:05+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-bars-examples-featured.jpg","type":"image\/jpeg"}],"author":"Aigars Silkalns","twitter_card":"summary_large_image","twitter_creator":"@ASilkalns","twitter_site":"@colorlib","twitter_misc":{"Written by":"Aigars Silkalns","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/#article","isPartOf":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/"},"author":{"name":"Aigars Silkalns","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/person\/0f34837e738805c94d594780f27e3c7a"},"headline":"22 Free Bootstrap Progress Bar Examples (2026)","datePublished":"2026-05-13T13:44:05+00:00","mainEntityOfPage":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/"},"wordCount":3332,"commentCount":0,"publisher":{"@id":"https:\/\/colorlib.com\/wp\/#organization"},"image":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/#primaryimage"},"thumbnailUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-bars-examples-featured.jpg","articleSection":["Snippets"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/","url":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/","name":"22 Free Bootstrap Progress Bar Examples (2026)","isPartOf":{"@id":"https:\/\/colorlib.com\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/#primaryimage"},"image":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/#primaryimage"},"thumbnailUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-bars-examples-featured.jpg","datePublished":"2026-05-13T13:44:05+00:00","description":"22 free Bootstrap progress bar examples \u2014 striped, animated, multi-segment, file-upload patterns. Bootstrap 5 with code samples. (2026)","breadcrumb":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/#primaryimage","url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-bars-examples-featured.jpg","contentUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-progress-bars-examples-featured.jpg","width":1200,"height":630,"caption":"Grid of four free Bootstrap progress bar examples \u2014 neon glassmorphism bar, CSS animated circular counter, multi-step form wizard, and stacked multi-segment progress"},{"@type":"BreadcrumbList","@id":"https:\/\/colorlib.com\/wp\/bootstrap-progress-bars\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colorlib.com\/wp\/"},{"@type":"ListItem","position":2,"name":"Snippets","item":"https:\/\/colorlib.com\/wp\/category\/snippets\/"},{"@type":"ListItem","position":3,"name":"22 Free Bootstrap Progress Bar Examples (2026)"}]},{"@type":"WebSite","@id":"https:\/\/colorlib.com\/wp\/#website","url":"https:\/\/colorlib.com\/wp\/","name":"Colorlib","description":"WordPress tutorials, theme reviews, and web design inspiration. Free themes and 1,000+ HTML templates from Colorlib.","publisher":{"@id":"https:\/\/colorlib.com\/wp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colorlib.com\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/colorlib.com\/wp\/#organization","name":"Colorlib","url":"https:\/\/colorlib.com\/wp\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/logo\/image\/","url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/colorlib-logo-top-1.png","contentUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/colorlib-logo-top-1.png","width":800,"height":400,"caption":"Colorlib"},"image":{"@id":"https:\/\/colorlib.com\/wp\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/colorlib","https:\/\/x.com\/colorlib","https:\/\/www.instagram.com\/colorlib\/","https:\/\/www.linkedin.com\/company\/colorlib","https:\/\/youtube.com\/c\/Colorlib"]},{"@type":"Person","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/person\/0f34837e738805c94d594780f27e3c7a","name":"Aigars Silkalns","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","caption":"Aigars Silkalns"},"description":"Frontend web developer and web designer specializing in WordPress theme development. After graduating with BA he self-taught frontend web development. Currently has over 10 years of experience in mainly CSS, HTML (TailwindCSS, Bootstrap), JavaScript(React, Vue, Angular), and PHP. Obsessed with application performance, user experience, and simplicity.","sameAs":["https:\/\/colorlib.com\/","https:\/\/facebook.com\/silkalns","https:\/\/x.com\/ASilkalns"],"url":"https:\/\/colorlib.com\/wp\/author\/aigars-silkalns\/"}]}},"_links":{"self":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts\/376430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/users\/697"}],"replies":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/comments?post=376430"}],"version-history":[{"count":1,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts\/376430\/revisions"}],"predecessor-version":[{"id":376431,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts\/376430\/revisions\/376431"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/media\/376387"}],"wp:attachment":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/media?parent=376430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/categories?post=376430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/tags?post=376430"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/post_series?post=376430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}