@kabbage/sprout 0.13.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';
css compiled 
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 96;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 85, 96;
    stroke-dashoffset: -25;
  }
  100% {
    stroke-dasharray: 85, 96;
    stroke-dashoffset: -87;
  }
}

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

.spr-spinner {
  stroke-linecap: round;
  stroke-dasharray: 85, 96;
  stroke-dashoffset: -25;
  animation: dash 1.2s cubic-bezier(0.67, 0.36, 0.42, 0.69) infinite;
  stroke: spr-color(primary, 70);
}