$height:1px;
$width:100px;
$timing:.9,.70,.75, 1.13;
$random:random(3);
$randomSpeed:(random() * 0.99) + s;

@-webkit-keyframes openUp2 {
  50% {
    height:100px;
    top:45%;
    border:2px solid #369;
  }}

@-webkit-keyframes bodySpin {
  0% {
    -webkit-transform:rotate(0deg);
  }
  100% {
    -webkit-transform:rotate(360deg);
  }}

body {
  position:fixed;
  top:50%;
  left:50%;
  -webkit-animation:bodySpin 2.5s linear infinite;
}

@for $i from 1 through 8 {
 $randomSpeed:(random(3) * $i) + s;
  $degAngle:(#{$i * 30}deg);
  div:nth-child(#{$i}) {
    box-sizing:border-box;
    position:fixed;
    border-radius:100%;
    top:50%;
    left:50%;
    height:$height;
    width:$width;
    margin-left:-$width / 2;
    margin-top:-$height / 2;
    border:1px solid #369;
    -webkit-animation:
    openUp2 $randomSpeed -2.2s cubic-bezier($timing) infinite;
    -webkit-transform:rotate($degAngle);
  }
}