#experiment-color-spiral {
  position: relative;
  padding: 50%;
  border-radius: 100%;
  max-width: 100%;
  overflow: hidden;

  div {
    position: absolute;
    border-radius: 100%;
    border-top: 1px solid #444;

    @mixin position($pos) {
      top: $pos;
      left: $pos;
      right: $pos;
      bottom: $pos;
    }

    @for $i from 1 through 10 {

      &:nth-child(#{$i}) {
        -webkit-animation: derp-#{$i} 10s infinite;
        animation: derp-#{$i} 10s infinite;

        $pos: percentage((2 * $i - 1) / 100);
        $posEnd: percentage((5 * $i - 1) / 100);
        $g: 255 - 10 * $i;

        @keyframes derp-#{$i} {
          0% {
            background: rgb(0, $g, 0);

            -webkit-transform: rotate(0);
            transform: rotate(0);

            @include position($pos);
          }
          50% {
            background: rgb(0, $g, 255);

            -webkit-transform: rotate(180 * $i  + deg);
            transform: rotate(180 * $i  + deg);

            @include position($posEnd);
          }
          100% {
            background: rgb(0, $g, 0);

            -webkit-transform: rotate(0);
            transform: rotate(0);

            @include position($pos);
          }
        }

        @-webkit-keyframes derp-#{$i} {
          0% {
            background: rgb(0, $g, 0);

            -webkit-transform: rotate(0);
            transform: rotate(0);

            @include position($pos);
          }
          50% {
            background: rgb(0, $g, 255);

            -webkit-transform: rotate(180 * $i  + deg);
            transform: rotate(180 * $i  + deg);

            @include position($posEnd);
          }
          100% {
            background: rgb(0, $g, 0);

            -webkit-transform: rotate(0);
            transform: rotate(0);

            @include position($pos);
          }
        }

      }

    }
  }

}