Progress Bars

Progress Indicator

A progress indicator informs users about the status of a lengthy operation. There are two types of progress indicators, each of which is suitable for a specific situation:

Asynchronous Progress Indicators

An asynchronous progress indicator provides feedback on an ongoing process. Because an asynchronous progress indicator typically appears when the user initiates a process, a label is not usually necessary. If you decide to provide a label that appears with the indicator, create a complete or partial sentence that briefly describes the process that is occurring.

Determine Progress bar

A determinate progress bar provides feedback on a process with a known duration.

In a determinate progress bar, the "fill" moves from left to right. Users generally expect a determinate progress bar to disappear as soon as the fill completes.

Use a determinate progress bar when the full length of an operation can be determined and you want to tell the user how much of the process has been completed. For example, you could use a determinate progress bar to show the progress of an attachment uploading.

50%
<div class="progress">
 <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100">
       <span class="sr-only">50%</span>
   </div>
</div>