Progress Bar

Use background utility classes to change the appearance of individual progress bars. For example, to dispaly Info (blue) color progress bar add bg-info class to individual progress-bar.

HTML
Pug

<!-- Progress Primary (Style 1) -->
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span><i class="fe-icon-globe"></i>Web Development - 60%</span>
  </div>
</div>

<!-- Progress Multiple Bars (Style 1) -->
<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-warning" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Progress Striped Animated (Style 1) -->
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Progress Light Skin (Style 1) -->
<div class="progress progress-light-skin">
  <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span><i class="fe-icon-globe"></i>Web Development - 60%</span>
  </div>
</div>

//- Progress Primary (Style 1)
.progress
  .progress-bar(role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100")
    span
      i.fe-icon-globe
      | Web Development - 60%

//- Progress Multiple Bars (Style 1)
.progress
  .progress-bar.bg-success(role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100")
  .progress-bar.bg-info(role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100")
  .progress-bar.bg-warning(role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")

//- Progress Striped Animated (Style 1)
.progress
  .progress-bar.progress-bar-striped.progress-bar-animated((role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100")

//- Progress Light Skin (Style 1)
.progress.progress-light-skin
  .progress-bar(role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100")
    span
      i.fe-icon-globe
      | Web Development - 60%

Use background utility classes to change the appearance of individual progress bars. For example, to dispaly Info (blue) color progress bar add bg-info class to individual progress-bar.

HTML
Pug

<!-- Progress Primary (Style 2) -->
<span class="progress-label">
  <i class="fe-icon-globe"></i>
  Web Development
</span>
<div class="progress progress-style-2">
  <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span class="progress-label text-right">60%</span>

<!-- Progress Light Skin (Style 2) -->
<span class="progress-label text-white">
  <i class="fe-icon-globe"></i>
  Web Development
</span>
<div class="progress progress-style-2 progress-light-skin">
  <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span class="progress-label text-right text-white">60%</span>

//- Progress Primary (Style 1)
span.progress-label
  i.fe-icon-globe
  | Web Development
.progress.progress-style-2
  .progress-bar(role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100")
span.progress-label.text-right 60%

//- Progress Light Skin (Style 1)
span.progress-label.text-white
  i.fe-icon-globe
  | Web Development
.progress.progress-style-2.progress-light-skin
  .progress-bar(role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100")
span.progress-label.text-right.text-white 60%

Use background utility classes to change the appearance of individual progress bars. For example, to dispaly Info (blue) color progress bar add bg-info class to individual progress-bar.

HTML
Pug

<!-- Progress Primary (Style 3) -->
<span class="progress-label">
  <i class="fe-icon-globe"></i>
  Web Development
</span>
<div class="progress progress-style-3">
  <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span class="progress-label text-right">60%</span>

<!-- Progress Light Skin (Style 3) -->
<span class="progress-label text-white">
  <i class="fe-icon-globe"></i>
  Web Development
</span>
<div class="progress progress-style-3 progress-light-skin">
  <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span class="progress-label text-right text-white">60%</span>

//- Progress Primary (Style 3)
span.progress-label
  i.fe-icon-globe
  | Web Development
.progress.progress-style-3
  .progress-bar(role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100")
span.progress-label.text-right 60%

//- Progress Light Skin (Style 3)
span.progress-label.text-white
  i.fe-icon-globe
  | Web Development
.progress.progress-style-3.progress-light-skin
  .progress-bar(role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100")
span.progress-label.text-right.text-white 60%

Use background utility classes to change the appearance of individual progress bars. For example, to dispaly Info (blue) color progress bar add bg-info class to individual progress-bar.

HTML
Pug

<!-- Progress Primary Animated (Style 2) -->
<span class="progress-label">
  <i class="fe-icon-globe"></i>
  Web Development
</span>
<div class="progress progress-style-2 progress-animate-fill">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span class="progress-label text-right">60%</span>

<!-- Progress Warning Animated (Style 3) -->
<span class="progress-label">
  <i class="fe-icon-database"></i>
  Back-End Dev
</span>
<div class="progress progress-style-3 progress-animate-fill">
  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span class="progress-label text-right">75%</span>

//- Progress Primary Animated (Style 2)
span.progress-label
  i.fe-icon-globe
  | Web Development
.progress.progress-style-2.progress-animate-fill
  .progress-bar(role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100")
span.progress-label.text-right 60%

//- Progress Warning Animated (Style 3)
span.progress-label
  i.fe-icon-database
  | Back-End Dev
.progress.progress-style-3.progress-animate-fill
  .progress-bar.bg-warning(role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100")
span.progress-label.text-right 75%

Progress Bar

Style 1 (Default)

Style 2

Style 3

Animate when in view Works only with Style 2 and 3

Progress Bar

Code

Code

Code

Code

Style 1 (Default)

Style 2

Style 3

Animate when in view Works only with Style 2 and 3