<span id="circle">
  <span></span>
  <span></span>
</span>

$dark-black: #252525;
$teal: #1b9bd8;
$red: #ef5e62;
$yellow: #fab000;
$green: #53a93f;

$circle-speed: .01;
$circle-size: 200px;

$default-prefixes: webkit moz ms o;

@mixin prefix($property, $value, $prefixes: $default-prefixes) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: #{$value};
  }
  #{$property}: #{$value};
}

@mixin circle($width, $color) {
  width: $width;
  height: $width;
  background: $color;
  margin-left: -$width / 2;
  margin-top: -$width / 2;
  @include prefix('border-radius', $width / 2);
}

@mixin circle-resize($width) {
  width: $width;
  height: $width;
  margin-left: -$width / 2;
  margin-top: -$width / 2;
  @include prefix('border-radius', $width / 2);
}


body {
	background: $dark-black;
}

#circle {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  @include prefix('animation-name', 'worm-hole-resize');
  @include prefix('animation-duration', $circle-speed + s);
  @include prefix('animation-iteration-count', 'infinite');
  &:before, &:after, span {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    @include prefix('animation-name', 'worm-hole-resize');
    @include prefix('animation-duration', $circle-speed + s);
    @include prefix('animation-iteration-count', 'infinite');
  }
  &:before {
    content: '';
    @include circle($circle-size, $green);
  }
  &:after {
    content: '';
    @include circle($circle-size, $red);
    @include prefix('animation-delay', ($circle-speed / 4) + s);
  }
  span:nth-of-type(1) {
    @include circle($circle-size, $yellow);
    @include prefix('animation-delay', ($circle-speed / 2) + s);
  }
  span:nth-of-type(2) {
    @include circle($circle-size, $teal);
    @include prefix('animation-delay', ($circle-speed / 4 * 3) + s);
  }
}
@-webkit-keyframes worm-hole-resize {
  0% {
    @include circle-resize($circle-size);
  }
  100% {
    @include circle-resize(0px);
  }
}

@-moz-keyframes worm-hole-resize {
  0% {
    @include circle-resize($circle-size);
  }
  100% {
    @include circle-resize(0px);
  }
}

@-ms-keyframes worm-hole-resize {
  0% {
    @include circle-resize($circle-size);
  }
  100% {
    @include circle-resize(0px);
  }
}

@-o-keyframes worm-hole-resize {
  0% {
    @include circle-resize($circle-size);
  }
  100% {
    @include circle-resize(0px);
  }
}