.testio-loader-wrapper {
  overflow: hidden;
  position: relative;

  .stroke {
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: $loader-stroke-width;
  }

  .anim-bar {
    animation: dash-line 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke: $loader-color1;
  }

  .anim-circle {
    animation: dash-circle 1.5s ease-in-out infinite,
    color 6s ease-in-out infinite;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

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

  @keyframes dash-line {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: $loader-size * -1;
    }

    50% {
      stroke-dasharray: 50, 200;
    }

    100% {
      stroke-dasharray: 0, 200;
      stroke-dashoffset: $loader-size;
    }
  }

  @keyframes dash-circle {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
    }

    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
    }
  }

  @keyframes color {
    100%,
    0% {
      stroke: $loader-color1;
    }

    99% {
      stroke: $loader-color2;
    }
  }
}

.testio-loader-i {
  height: $loader-size;
  left: 0;
  position: absolute;
  top: 0;
  width: $loader-size;
}

.testio-loader-o-wrapper {
  height: $loader-size;
  margin-left: $loader-stroke-width * 2;
  position: relative;
  width: $loader-size;

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

  .testio-loader-o {
    animation: rotate 2s linear infinite;
    bottom: 0;
    height: $loader-size;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform-origin: center center;
  }
}