Horizontal loading bar

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

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, loading bar) 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

					
Copy to clipboard
<div class="horizontal-loading">
   <div class="loading-bar" role="progressbar">
      <span class="sr-only">Loading bar</span>
   </div>
</div>

Options

Size options

					
<!-- Thin horizontal loading bar -->
Copy to clipboard
<div class="horizontal-loading horizontal-loading-sm">
   ...
</div>

<!-- Extra-thin horizontal loading bar -->
Copy to clipboard
<div class="horizontal-loading horizontal-loading-xs">
   ...
</div>

<!-- Default horizontal loading bar -->
Copy to clipboard
<div class="horizontal-loading">
    ...
</div>

With labels

					
Copy to clipboard
<div class="horizontal-loading horizontal-loading-xs p-0">
   <div class="loading-bar" role="progressbar"></div>
   <span class="loading-bar-label">Loading, please wait...</span>
</div>