CSS only

Spinner

A lightweight loading indicator. SCSS-only: a single ng-spinner that takes its colour from the current text colour.

Drop a ng-spinner anywhere. It inherits currentColor, so a text-colour helper (text-primary…) tints it. Add role="status" for assistive tech.

Sizes

Three sizes via sm / lg (medium is the default).

spinner.html

<span class="ng-spinner sm" role="status" aria-label="Loading"></span>
<span class="ng-spinner" role="status" aria-label="Loading"></span>
<span class="ng-spinner lg" role="status" aria-label="Loading"></span>

Colors

Tint with any text-colour helper — the spinner follows currentColor.

spinner.html

<span class="ng-spinner text-primary" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-secondary" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-success" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-info" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-warning" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-danger" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-mute" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-blue" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-blue-sky" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-green" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-lime" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-aguagreen" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-indigo" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-purple" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-purple-heart" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-cyan" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-magenta" role="status" aria-label="Loading"></span>
<span class="ng-spinner text-yellow" role="status" aria-label="Loading"></span>

Anatomy

ng-spinner sm lg center

center centers the spinner inside its container.

Reference

Generated from the component source (_ng_spinner.scss).

Component info

Name	`Spinner`
Type	`css`
Version	`1.0.0`
Status	`css`
CSS	`/assets/css/components/_ng_spinner.scss`

Classes

.ng-auto-disable .ng-btn .ng-spinner

Tokens

--ng-spinner-active-color --ng-spinner-border-width --ng-spinner-size --ng-spinner-speed --ng-spinner-track-color