.spinner-pathBack,
.spinner-pathLine {
  fill: none;
  stroke-width: 40;
}

.spinner-pathBack {
  stroke: rgba(128, 128, 128, 0.4);
  stroke-linecap: round;
}

.spinner-pathLine {
  stroke: currentColor;
  stroke-linecap: butt;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.spinner-pathLine.spinner-start1,
.spinner-pathLine.spinner-start2 {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  opacity: 0;
  animation-timing-function: step-start;
}

.spinner-pathLine.spinner-line1 {
  animation-timing-function: ease-in;
  stroke-dasharray: 1318;
  stroke-dashoffset: 1318;
  animation-name: spinner-line1;
}

.spinner-pathLine.spinner-line2 {
  animation-timing-function: ease-out;
  stroke-dasharray: 1321;
  stroke-dashoffset: 1321;
  animation-name: spinner-line2;
}

.spinner-pathLine.spinner-start1 {
  animation-name: spinner-start1;
}

.spinner-pathLine.spinner-start2 {
  animation-name: spinner-start2;
}

@keyframes spinner-line1 {
  from {
    stroke-dashoffset: 1318;
  }
  25% {
    stroke-dashoffset: 0;
  }
  25.001%,
  50% {
    stroke-dashoffset: 2642;
  }
  75%,
  to {
    stroke-dashoffset: 1318;
  }
}

@keyframes spinner-line2 {
  from,
  25% {
    stroke-dashoffset: 1321;
  }
  50% {
    stroke-dashoffset: 0;
  }
  50.001%,
  75% {
    stroke-dashoffset: 2642;
  }
  to {
    stroke-dashoffset: 1321;
  }
}

@keyframes spinner-start1 {
  from,
  1% {
    opacity: 0;
  }
  2%,
  51% {
    opacity: 1;
  }
  52%,
  to {
    opacity: 0;
  }
}

@keyframes spinner-start2 {
  from,
  25% {
    opacity: 0;
  }
  26%,
  75% {
    opacity: 1;
  }
  76%,
  to {
    opacity: 0;
  }
}