Pattern Library

Progress & Activity

It's important to communicate to users when something is happening that they need to wait for e.g. data being processed or fetched from a server. Without any feedback it can feel like an application has frozen or become unresponsive.

Progress Bar

Progress bars are useful to show for determinate progress, where there’s a known point of progress being complete. They can also be used for indeterminate progress in certain situations.

Determinate

Indeterminate

<div class="progressBar">
  <progress class="progressBar__progress" value="0" max="100"></progress>
</div>

<div class="progressBar progressBar--indeterminate">
  <progress class="progressBar__progress"></progress>
</div>

Spinner

Spinners are a more compact way than progress bars to show activity.

<div class="spinner">
  <svg class="spinner__wrapper" viewBox="25 25 50 50">
    <circle class="spinner__background" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
    <circle class="spinner__path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
  </svg>
</div>