Loading Animation

The Loading Animation informs the user a website or application is getting data.

On this page:

Best Practice

Show the Loading Animation while content is being loaded.
Put the Loading Animation into the markup which wraps the loaded content.
Hide the Loading Animation when the content is finished loading.

Usage

<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-ui" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Page top