Abstract circle spinner component

scss

//
// @param  hash  $params
//   size         length
//   color        hex
//   border-size  length
//   delay        seconds
//   duration     seconds
//

@use "node_modules/sass-basis/src/css/core";

.c-circle-spinner {
  @include core.circle-spinner((
    size: 20px,
    color: var(--_light-color-gray),
    border-size: 3px,
    delay: 0s,
    duration: 2s,
  ));
}

html

<div class="c-circle-spinner"></div>

Abstract dots spinner component

scss

//
// @param  hash  $params
//   size         length
//   color        hex
//   delay        seconds
//   duration     seconds
//   scale        int
//

@use "node_modules/sass-basis/src/css/core";

.c-dots-spinner {
  @include core.dots-spinner((
    size: 10px,
    color: var(--_color-gray),
    delay: 0s,
    duration: 2s,
    scale: 1.3,
  ));
}

html

<div class="c-dots-spinner">
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
</div>

Abstract pulse spinner component

scss

//
// @param  hash  $params
//   height    length
//   width     length
//   color     hex
//   delay     seconds
//   duration  seconds
//   scale     int
//

@use "node_modules/sass-basis/src/css/core";

.c-pulse-spinner {
  @include core.pulse-spinner((
    height: 16px,
    width: 5px,
    color: var(--_color-gray),
    delay: 0s,
    duration: 2s,
    scale: 1.3,
  ));
}

html

<div class="c-pulse-spinner">
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
</div>