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="sr-only">Loading...</span>
</div>
<div class="spinner-border text-ui" role="status">
  <span class="sr-only">Loading...</span>
</div>
Previous page
Next page