$-rotation-animation-speed: 1.4s;
$-rotation-animation-easing: linear;
$-stroke-animation-speed: 1.5s;
$-stroke-animation-easing: ease-in-out;
$-stroke-width: 3.6;
$-stroke-start-dasharray: 1, 200;
$-stroke-end-dasharray: 80, 200;

.qpp-c-circular-loader {
  margin: 0 auto;
  width: 50px;
  height: 50px;
}

.qpp-c-circular-loader > svg {
  animation: circular-rotate $-rotation-animation-speed
    $-rotation-animation-easing infinite;
}

.qpp-c-circular-loader > svg > circle {
  stroke: currentColor;
  stroke-width: $-stroke-width;
  animation: circular-animate-stroke $-stroke-animation-speed
    $-stroke-animation-easing infinite;
  stroke-linecap: round;
}

@keyframes circular-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes circular-animate-stroke {
  0% {
    stroke-dasharray: $-stroke-start-dasharray;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: $-stroke-end-dasharray;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: $-stroke-end-dasharray;
    stroke-dashoffset: -124;
  }
}