Progress Bar

Default
25%
50%
75%
100%
Stacked
25%
35%
25%
Copy 
  
   
<div class="row">
   <div class="col-lg-6">
   <div class="card">
      <div class="card-body">
         <h5 class="card-title">Default</h5>

         <div class="progress">
           <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
         </div>
         <div class="progress mt-3">
           <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
         </div>
         <div class="progress mt-3">
           <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
         </div>
         <div class="progress mt-3">
           <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
         </div>

       </div>
   </div>
</div>

<div class="col-lg-6">
   <div class="card">
      <div class="card-body min-height-progress">
         <h5 class="card-title">Stacked</h5>

         <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>                                          
            <div class="progress-bar bg-success" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">35%</div>   
            <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>                                        </div>
         </div>



       </div>
   </div>
</div>
Copy 
      
     .progress-bar {
       background-color: #167df5;
     }
     
     .min-height-progress {
       min-height: 192px;
       max-height: 206px;
     }
     
     
     element.style {
         width: 25%;
     }
     .progress-bar {
         background-color: #167df5;
     }
     .progress-bar {
         display: flex;
         flex-direction: column;
         justify-content: center;
         overflow: hidden;
         color: var(--bs-progress-bar-color);
         text-align: center;
         white-space: nowrap;
         background-color: var(--bs-progress-bar-bg);
         transition: var(--bs-progress-bar-transition);
     }
     
     @if $enable-transitions {
       @keyframes progress-bar-stripes {
         0% { background-position-x: $progress-height; }
       }
     }
     // scss-docs-end progress-keyframes
     
     .progress {
       // scss-docs-start progress-css-vars
       --#{$prefix}progress-height: #{$progress-height};
       @include rfs($progress-font-size, --#{$prefix}progress-font-size);
       --#{$prefix}progress-bg: #{$progress-bg};
       --#{$prefix}progress-border-radius: #{$progress-border-radius};
       --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
       --#{$prefix}progress-bar-color: #{$progress-bar-color};
       --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
       --#{$prefix}progress-bar-transition: #{$progress-bar-transition};
       // scss-docs-end progress-css-vars
     
       display: flex;
       height: var(--#{$prefix}progress-height);
       overflow: hidden; // force rounded corners by cropping it
       @include font-size(var(--#{$prefix}progress-font-size));
       background-color: var(--#{$prefix}progress-bg);
       @include border-radius(var(--#{$prefix}progress-border-radius));
       @include box-shadow(var(--#{$prefix}progress-box-shadow));
     }
     
     .progress-bar {
       display: flex;
       flex-direction: column;
       justify-content: center;
       overflow: hidden;
       color: var(--#{$prefix}progress-bar-color);
       text-align: center;
       white-space: nowrap;
       background-color: var(--#{$prefix}progress-bar-bg);
       @include transition(var(--#{$prefix}progress-bar-transition));
     }
     
     .progress-bar-striped {
       @include gradient-striped();
       background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
     }
     
     @if $enable-transitions {
       .progress-bar-animated {
         animation: $progress-bar-animation-timing progress-bar-stripes;
     
         @if $enable-reduced-motion {
           @media (prefers-reduced-motion: reduce) {
             animation: none;
           }
         }
       }
     }