.spinner {

$spinner-size: 80px;

position: relative;
margin: 0 auto;
width: $spinner-size;

&:before {
  content: '';
  display: block;
  padding-top: 100%;
}

&--hidden {
  display: none;
}

&--small {
  width: $spinner-size / 2;
}

&--small &__path {
  stroke-width: 3;
}

&__wrapper {
  animation: spinner--rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

&__path {
  transform: translateZ(0);
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke: $primary-color;
  animation: spinner--dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
}

}

@keyframes spinner–rotate {

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

}

@keyframes spinner–dash {

0% {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
}
50% {
  stroke-dasharray: 89, 200;
  stroke-dashoffset: -35px;
}
100% {
  stroke-dasharray: 89, 200;
  stroke-dashoffset: -124px;
}

}