.silvertech

$color: #43BBC5;

@function shadow($count, $width, $size, $offset) {
  $bs: ();
  @for $i from 0 through $count {
      $r: $width/2;
      $x: $r*cos($i*2*pi()/$count + $offset) + px;
      $y: $r*sin($i*2*pi()/$count + $offset) + px;
      $bs: $bs, $x $y 0px $size + px $color;
  }
  @return $bs;
}

.silvertech {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: .25em;
  height: .25em;
  margin: auto;
  border-radius: 50%;
  animation: loading 3s alternate infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

@keyframes loading { 
  0% { box-shadow: shadow(1, 0, 0, 0); @include transform(rotate(0deg)); }
  19% { box-shadow: shadow(1, 0, 0, 0); @include transform(rotate(0deg)); background: #f2f2f2; }
  20% { box-shadow: shadow(1, 0, 2, 0), shadow(2, 30, 0, 0); background: $color; } 
  24% { box-shadow: shadow(1, 0, 2, 0), shadow(2, 30, 3, 0), shadow(8, 66, 0, 0); } 
  28% { box-shadow: shadow(1, 0, 2, 0), shadow(2, 30, 3, 0), shadow(8, 66, 4, 0), shadow(18, 100, 0, 4); }
  32% { box-shadow: shadow(1, 0, 2, 0), shadow(2, 30, 3, 0), shadow(8, 66, 4, 0), shadow(18, 100, 6, 4), shadow(18, 138, 0, 0); }
  36% { box-shadow: shadow(1, 0, 2, 0), shadow(2, 30, 3, 0), shadow(8, 66, 4, 0), shadow(18, 100, 6, 4), shadow(18, 138, 8, 0), shadow(1, 190, 0, 0); }
  40% { box-shadow: shadow(1, 0, 2, 0), shadow(2, 30, 3, 0), shadow(8, 66, 4, 0), shadow(18, 100, 6, 4), shadow(18, 138, 8, 0), shadow(1, 190, 11, 0); @include transform(rotate(-405deg)); }
  100% { box-shadow: shadow(1, 0, 2, 0), shadow(2, 30, 3, 0), shadow(8, 66, 4, 0), shadow(18, 100, 6, 4), shadow(18, 138, 8, 0), shadow(1, 190, 11, 0); @include transform(rotate(-405deg)); background: $color; }
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #F2F2F2;
}