Current version: 1.9.8Components

Spinner

Variables

Variable property value desc.
$spinner-size size r(8) spinner size
$spinner-thickness border-width "rem(4px) spinner thickness
$small-spinner-size size r(4) small spinner size
$small-spinner-thickness border-width "rem(2px) small spinner thickness
$large-spinner-size size r(16) large spinner size
$large-spinner-thickness border-width "rem(8px) large spinner thickness
$spinner-primary-color color $venice-blue spinner primary color
$spinner-secondary-color color $iron spinner secondary color
$neutral-spinner-primary-color color $alabaster neutral spinner primary color
$neutral-spinner-secondary-color color $outer-space neutral spinner secondary color
$spinner-rotation-duration duration .75s spinner rotation duration

Basic

<div class="Spinner"></div>

Sizes

<div class="Spinner Spinner--s"></div>
<div class="Spinner"></div>
<div class="Spinner Spinner--l"></div>

Colors

<div style="background-color: #000; padding: 20px;">
  <div class="Spinner Spinner--neutral Spinner--s"></div>
  <div class="Spinner Spinner--neutral"></div>
  <div class="Spinner Spinner--neutral Spinner--l"></div>
</div>

Types

<div class="Spinner Spinner--infinite"></div>