Don't use any classes if there is no progress bar (width: 0).

Code Sample

<div class="progress">
  <div class="progress-bar" style="width: 0;"></div>
</div>

Use `.small` class which has `$theme-color-primary-lighter` as its color.

Code Sample

<div class="progress">
  <div class="progress-bar small" style="width: 20%;"></div>
</div>

Use `.medium` class which has `$theme-color-primary-light` as its color.

Code Sample

<div class="progress">
  <div class="progress-bar medium" style="width: 50%;"></div>
</div>

Use `.large` class which has `$theme-color-primary` as its color.

Code Sample

<div class="progress">
  <div class="progress-bar large" style="width: 80%;"></div>
</div>

Apply class `loading-spinner` to an element to create a busy spinner.

Code Sample

<div class="loading-spinner"></div>

There's a small JavaScript module included the UI Library JS file that can be used to show and hide the spinner. The simplest use case is to call the show or methods without any arguments:

// display the loading spinner centered over the page
loadingSpinner.show(); 

// immediately hide the loading spinner
loadingSpinner.hide();

By default, the spinner will be displayed centered over the page. If you want to display the spinner over a specific element, you can pass that element as an argument to the show method by using a jQuery selector:

// display the loading spinner centered over the first card on the page
loadingSpinner.show({ target: '.c-card--content:first' }); 

The spinner can also be faded out over a specific duration by passing a duration in milliseconds as the second argument:

// fade out the spinner over 1.5 seconds
loadingSpinner.hide(1500);