.preloader-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  transform: translate3d(-50%, -50%, 0);
}

.preloader-spinner .md-spinner {
  width: 60px;
  height: 60px;
  animation: outer 6600ms linear infinite;
}
.preloader-spinner .md-spinner svg {
  width: 60px;
  height: 60px;
  animation: inner 1320ms linear infinite;
}
.preloader-spinner .md-spinner svg circle {
  fill: none;
  stroke: var(--preloader-spinner-color);
  stroke-linecap: square;
  stroke-width: 6px;
  animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
}
@keyframes outer {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes inner {
  0% {
    transform: rotate(-100.8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes arc {
  0% {
    stroke-dasharray: 1 210.4867077905px;
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dasharray: 151.5504296092px, 210.4867077905px;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 1 210.4867077905px;
    stroke-dashoffset: -151.5504296092px;
  }
}
