Design progress bar using CSS and JavaScript

A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer or installation.

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

Follow this video for complete guidance :

https://www.youtube.com/watch?v=9GrBgLlzcO8

Full Source Code :

<style>
  .progress{
    height: 8px;
    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; 
  }
</style>

<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>

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