A Pen by Enrique Canals.

index.haml

.load-spinner
  .square.square-1
  .square.square-2
  .square.square-3
  .square.square-4

mCIFz.markdown

mCIFz

A Pen by Enrique Canals on CodePen.

License.

style.scss

@import "compass/css3";
.load-spinner{
  font-size: 20px;
  position: relative;
  width: 30px;
  height: 10px;
  margin: 150px auto;
  transform: rotate(90deg);
  
  .square{
    width: 1em;
    height: 1em;
    position: absolute;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    
    &.square-1, &.square-2{
      left: 0;
      background-image: linear-gradient(
        to left top, 
        #23A8C3 0%, 
        #18A79D 100%);
    }
    
    &.square-3{
      left: 1.5em;
      background-image: linear-gradient(
        to right bottom, 
        #27ACD5 36%, 
        #2382C1 100%);
    }
    
    &.square-4{
      left: 3em;
      background-image: linear-gradient(
        to right bottom, 
        #27ACD5 36%, 
        #2382C1 100%);
    }

    &.square-1{
      animation-name: reveal;
    }

    &.square-2, &.square-3{
      animation-name: slide;
    }

    &.square-4{
      animation-name: reveal;
      animation-direction: reverse;
    }
  }
}

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}