What is a progress bar?

A progress bar is an effective way to visually represent the progress within a process. Above is a Bootstrap (5.2) example that includes custom CSS styling to enhance its appearance.

HTML

<div class="demo-container">
  
<div class="container progress-bar-demo">
  <div class="row">
  <div class="progress">
  <div class="progress-bar demo-progress-bar-01" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
  <span class="demo-progress-info demo-progress-info-01" >100%</span>
  <span class="demo-progress-title">Project 01</span>
</div>

<div class="progress">
  <div class="progress-bar demo-progress-bar-02" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div>
  <span class="demo-progress-title">Project 02</span>
  <span class="demo-progress-info demo-progress-info-02" >60%</span>
</div>

<div class="progress">
  <div class="progress-bar demo-progress-bar-03" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
  <span class="demo-progress-title">Project 03</span>
  <span class="demo-progress-info demo-progress-info-03" >50%</span>
</div>

<div class="progress">
  <div class="progress-bar demo-progress-bar-04" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 40%"></div>
  <span class="demo-progress-title">Project 04</span>
  <span class="demo-progress-info demo-progress-info-04" >40%</span>
  </div>
  </div>
</div>
  
</div>

CSS

.progress-bar-demo .progress-bar {
  text-align: left !important;
  padding: 4px !important;
}

.progress-bar-demo .progress {
  position: relative;
  height: 28px;
  padding: 0;
  margin-bottom: 10px;
}

.progress-bar-demo .progress > .demo-progress-title {
  position: absolute;
  top: 4px;
  left: 10px;
  color: #FFFFFF;
}
  
.progress-bar-demo .demo-progress-bar-01 {
  background-color: #0dcaf0;
}

.progress-bar-demo .demo-progress-bar-02 {
  background-color: #008648;
}
  
  .progress-bar-demo .demo-progress-bar-03 {
  background-color: #dc3545;
  }
  
  .progress-bar-demo .demo-progress-bar-04 {
  background-color: #ffc107;
  }

.progress-bar-demo .progress > .demo-progress-info {
  position: relative;
  color: #ffffff;
  padding: 4px 6px;
  right: 0;
  z-index: 1 !important;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
  
.progress-bar-demo .progress > .demo-progress-info:before {
  content: "";
  position: absolute;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  height: 0px;
  width: 0px;
  margin-left: -14px;
}
  
.progress-bar-demo .progress > .demo-progress-info-01 {
  background-color: #0889a3;
}
  
.progress-bar-demo .progress > .demo-progress-info-01:before {
  border-right: 10px solid #0889a3;
}
  
.progress-bar-demo .progress > .demo-progress-info-02 {
  background-color: #006134;
}
  
.progress-bar-demo .progress > .demo-progress-info-02:before {
  border-right: 10px solid #006134;
}
  
.progress-bar-demo .progress > .demo-progress-info-03 {
  background-color: #a90111;
}
  
.progress-bar-demo .progress > .demo-progress-info-03:before {
  border-right: 10px solid #a90111;
}
   
.progress-bar-demo .progress > .demo-progress-info-04 {
  background-color: #b68800;
}
  
.progress-bar-demo .progress > .demo-progress-info-04:before {
  border-right: 10px solid #b68800;
}
</style>

Progress Bars

Progress bars Progress Bars with Tooltip

Basics

Create a Basic Bootstap Page Include CSS, JS and Font Awesome

LIST OF BOOTSTRAP SNIPPETS

What is a progress bar?

HTML

CSS

About Luan Morina