Angular Progress

The Angular progress components can be used to show a user how far along he/she is in a process. These Angular progress bars are built with two HTML elements, some CSS to set the width, and a few attributes. Now keep reading some examples to see how Angular Progress bars work.

Example

Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60% 
<div class="progress-wrapper">
  <div class="progress-info">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  </div>
</div>

<div class="progress-wrapper">
  <div class="progress-info">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  </div>
</div>

<div class="progress-wrapper">
  <div class="progress-info">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  </div>
</div>

<div class="progress-wrapper">
  <div class="progress-info">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  </div>
</div>

<div class="progress-wrapper">
  <div class="progress-info">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  </div>
</div>

<div class="progress-wrapper">
  <div class="progress-info">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  </div>
</div>

<div class="progress-wrapper">
  <div class="progress-info">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  </div>
</div>