Progress bar

Progress bars are used to show that the system is working when this isn't otherwise obvious. Typical examples are when the system is Ready, Loading, Waiting, Working, Processing, Saving, Printing etc. Progress bars are then used to describe the current status of the application. Read more about progress bars in the UX Guidelines.

Content Security Policy (CSP) compatibility. If your project has a Content Security Policy (CSP) which doesn't allow style-src 'unsafe-inline', then you won't be able to use inline ,style attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets element.style.width) or using custom CSS classes.

Use when

There are two types of work indicators, determinate and indeterminate.

  • Use the determinate work indicator (progress bar) when there's either a clear endpoint for the process or some other way to track progress.
  • Use an indeterminate work indicator (spinner) when there's no clear end point or when it can't be known when the process will be finished. A typical case is waiting for a server response.

Basic design

20% Complete 
					


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

Sizes

Extra-thin progress bar .progress.progress-xs

56% Complete

Thin progress bar .progress.progress-sm

50% Complete

Default progress bar .progress

50% Complete 
					

<!-- Thin progress-bar -->



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



<!-- Extra-thin progress-bar -->



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

With lables and procentage

50%

30%
Label / short description

70%
Label / short description
					


<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%;">
      <span class="percentage">35%</span>
   </div>
   <span class="progress-label">Label / short description</span>
</div>




<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%;">
      <span class="percentage">35%</span>
   </div>
   <div class="progress-label">Label / short description</div>
</div>