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

Options

Thin progress-bar

50% Complete

Extra-thin progress-bar

56% Complete

Display procentage and short descriptions

50%

30%
Label / short description

70%
Label / short description
				
// Basic progress-bar
<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>

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

// Progress-bar without default margin bottom
<div class="progress no-margin">
   <div class="progress-bar" role="progressbar" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100" style="width: 56%;">
      <span class="sr-only">56% Complete</span>
   </div>
</div>


// Progress-bar with label/short description and percentage label
<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>

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