.boxes
  .box
    .sides
      .back L
      .front L
  .box
    .sides
      .back O
      .front O
  .box
    .sides
      .back A
      .front A
  .box
    .sides
      .back D
      .front D
  .box
    .sides
      .back I
      .front I
  .box
    .sides
      .back N
      .front N
  .box
    .sides
      .back G
      .front G
  .box
    .sides
      .back .
      .front .
  .box
    .sides
      .back .
      .front .
  .box
    .sides
      .back .
      .front .
View Compiled
@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Oswald);

$rad: 6px;

body {
  font-family: 'Oswald';
  position: absolute;
  height: 100%;
  width: 100%;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;

  .boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    
    .box {
      box-sizing: border-box;
      height: 60px;
      width: 40px;      
      
      .sides {
        position: relative;
        width: 100%;
        height: 100%;
        //perspective: 200;

        div {
          position: absolute;
          text-align: center;
          line-height: 60px;
          color: #fff;
          font-size: 36px;
          width: 40px;
        }
        .front {
          background-color: #ee451a;
          backface-visibility: hidden;
          animation: flip 1.5s linear infinite;
        }
        .back {
          background-color: #176d97;
          //background-color: #85260f;
          color: rgba(255,255,255,.5);
          animation: flip 1.5s linear infinite;
        }
      }
      &:first-child .sides div {
        border-radius: $rad 0 0 $rad;
      }
      &:last-child .sides div {
        border-radius: 0 $rad $rad 0;
      }
    }
  }
}

@for $i from 1 through 10 {
  .boxes .box:nth-child(#{$i}) .sides div {
		animation-delay: $i * 30ms;
	}
}

@keyframes flip {
  0%   { transform: rotateX(360deg); }
  20%  { transform: rotateX(360deg); }
  50%  { transform: rotateX(180deg); }
  80%  { transform: rotateX(0deg); }
  100% { transform: rotateX(0deg); }
}
View Compiled
/*
Having fun with loading animations.  Use it if you like it :)
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js