Create simple JavaScript progress bar

A progress bar can be used to show how far along a user is in a process.

HTML Code:

<div class="progress">
  <div class="progress-bar progress-success" data-width="30"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-warning" data-width="15"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-info" data-width="75"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-danger" data-width="54"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-primary" data-width="100"></div>
</div>

CSS Code:

.progress{
  height: 15px;
  width: 300px;
  display: flex;
  background-color: #e9ecef;
  margin-bottom: 20px;
}
.progress .progress-success{
  background-color: #198754; 
}
.progress .progress-warning{
  background-color: #ffc107; 
}
.progress .progress-info{
  background-color: #0dcaf0; 
}
.progress .progress-danger{
  background-color: #dc3545; 
}
.progress .progress-primary{
  background-color: #0d6efd; 
}

JavaScript Code:

progress = document.getElementsByClassName('progress-bar');
  for(i=0;i<progress.length;i++){
    progress[i].style.width = progress[i].getAttribute('data-width')+'%';
  }

Preview

See the Pen JavaScript progressbar by Rashedul Hasan (@rhsuman) on CodePen.

RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply