@kabbage/sprout 0.25.2

Spinner Component

A CSS implementation of the Sprout spinner component.

Related

Sprout Spinner documentation [external]

.spr-spinner-container

scss

.spr-spinner-container {
  display: inline-block;
  width: rem(24px);
  height: rem(24px);
  animation: rotate 0.6s linear infinite;
  vertical-align: middle;
}

Example

html

<div class="spr-spinner-container">
  <svg viewBox="0 0 24 24">
    <circle class="spr-spinner" cx="12" cy="12" r="10.5" fill="none" stroke-width="3"></circle>
  </svg>
</div>

Compiled CSS

Example

scss

@import 'components/spinner';