@mixin wrapper-animation($name) { ... }@mixin wrapper-animation($name) { 
  /* stylelint-disable-next-line CssSyntaxError */
  @keyframes #{$name} {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
 }

@mixin path-animation($name) { ... }@mixin path-animation($name) { 
  /* stylelint-disable-next-line CssSyntaxError */
  @keyframes #{$name} {
    0% {
      stroke-dasharray: 1px, 200px;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 100px, 200px;
      stroke-dashoffset: 15px * -1;
    }

    100% {
      stroke-dasharray: 100px, 200px;
      stroke-dashoffset: 125px * -1;
    }
  }
 }

@mixin container($animation-name) { ... }@mixin container($animation-name) { 
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
  width: settings.$size;
  height: settings.$size;
  animation: settings.$animation-duration linear 0s infinite normal none running #{$animation-name};
 }

@mixin path($animation-name) { ... }@mixin path($animation-name) { 
  stroke: currentColor;
  stroke-width: settings.$circle-stroke-width;
  stroke-dasharray: 80px, 200px;
  stroke-dashoffset: 0;
  animation: settings.$animation-duration ease-in-out 0s infinite normal none running #{$animation-name};
 }

$size: unit.rem(24px) !default;

$circle-stroke-width: 3.6 !default;

$animation-duration: 1.4s !default;