<div class="spinner">
  <div class="blob top"></div>
  <div class="blob bottom"></div>
  <div class="blob left"></div>
  
  <div class="blob move-blob"></div>
</div>
@import "compass/css3";

body {
  background: #333;
}

.spinner {
  position: absolute;
  width: 30px;
  height: 30px;
  
  top: 50%;
  left: 50%;
  @include transform(translate(-50%, -50%));
  
  .blob {
    position: absolute;
    top: 50%;
    left: 50%;
    @include transform(translate(-50%, -50%));
    border: 2px solid #fff;
    
    width: 10px;
    height: 10px;
    border-radius: 50%;
    
    &.top {
      top: 0;
      animation: blob-top 1s infinite ease-in;
    }
    &.bottom {
      top: 100%;
       animation: blob-bottom 1s infinite ease-in;
    }
    &.left {
      left: 0;
      animation: blob-left 1s infinite ease-in;
    }
  }
  
  .move-blob {
    background: #fff;
    top: 0;
    
    animation: blob-spinner-mover 1s infinite ease-in;
  }
}

@keyframes blob-bottom {
  25%, 50%, 75% {
    top: 50%;
    left: 100%;
  }
  100% {
    top: 0;
    left: 50%;
  }
}
@keyframes blob-left {
  25% {
    top: 50%;
    left: 0;
  }
  50%, 100% {
    top: 100%;
    left: 50%;
  }
}
@keyframes blob-top {
  50% {
    top: 0;
    left: 50%;
  }
  75%, 100% {
    top: 50%;
    left: 0;
  }
}

@keyframes blob-spinner-mover {
  0%, 100% {
    top: 0;
    left: 50%;
  }
  25% {
    top: 50%;
    left: 100%;
  }
  50% {
    top: 100%;
    left: 50%;
  }
  75% {
    top: 50%;
    left: 0;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.