Ocelot-Social/maintenance/lib/styleguide/components/layout/Spinner/style.scss

@use "@@/styles/shared" as *;
@use "@@/styles/tokens/tokens" as *;

$size-small: $space-base;
$size-base: $space-large;
$size-large: $space-x-large;

.ds-spinner {
  animation: rotate 16s linear infinite;
  position: relative;
  display: inline-block;
  width: $size-base;
  height: $size-base;

  &.ds-size-small {
    width: $size-small;
    height: $size-small;
  }
  &.ds-size-large {
    width: $size-large;
    height: $size-large;
  }

}

.ds-spinner-circle {
  stroke: $text-color-soft;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;

  .ds-spinner-inverse & {
    stroke: $color-primary-inverse;
  }

  .ds-spinner-primary & {
    stroke: $text-color-primary;
  }

  .ds-spinner-secondary & {
    stroke: $text-color-secondary;
  }

  .ds-spinner-danger & {
    stroke: $text-color-danger;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(2160deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}