Spinner

Useful states to indicate loading

Default

<div class="spinner" ng-class="$ctrl.spinnerClass">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
  </div>

Description

When the interface needs to communicate an element is loading we use <ut-spinner>. The basic implementation looks like: <ut-spinner></ut-spinner>

Title

Loading

<div class="spinner" ng-class="$ctrl.spinnerClass">
  <h3 class="spinner__title" ng-if="$ctrl.spinnerTitle">Loading</h3>
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

Description

This pattern is used when a label or title is necessary to accompany the spinner. The title implementation looks like: <ut-spinner spinner-title="Loading&hellip;"></ut-spinner>

Do

  • Loading dots should always appear above text when applicable.
  • Text should end in a true ellipsis &hellip;

Don't

  • Delay loading dots longer than they need to be there
  • Lead customers to believe something is being loaded when it isn’t
  • orders/app/assets/javascripts/angular/modules/utils/spinner.html
  • modules/utils/spinner.comp.js.es6