Progress Bar

The Progress Bar component is a graphical representation of the progress of a task or process. It visually displays the percentage completed in a horizontal bar that fills up as the task progresses. It is a useful UI element to provide users with feedback on the status of a process, particularly for lengthy operations or for when users need to wait for something to complete.

The Progress Bar component should be used in situations where users need to be informed of the progress of a task or process. It is particularly useful for lengthy operations such as file uploads, software installations, or system updates, where users may need to wait for some time before the process completes. The Progress Bar should be clearly labeled so that users understand what the bar represents.

1. Provide meaningful text labels that describe what the Progress Bar represents and what task or process it is tracking.
2. Use the aria-valuenow, aria-valuemin, and aria-valuemax attributes to provide accessibility information to assistive technology users.
3. Use high contrast colors to ensure that the Progress Bar is visible to users with low vision or color blindness.
4. When using multiple progress bars in a component (like the File Upload Component) do not use multiple aria-live attributes as doing so will overwhelm screenreaders. Instead provide a summary of the multiple processing steps with a single aria-live update.

<h5 id="upProg">Upload Progress</h5>

<div class="progress mt-3">
  <div
    class="progress-bar progress-bar-striped progress-bar-animated"
    role="progressbar"
    aria-valuenow="75"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-labelledby="upProg"
    style="width: 75%"></div>
</div>

      <div class="progress" role="progressbar" aria-label="Upload progress at 55%" aria-valuenow="55%" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 55%"></div>
      </div>