A CodePen by Tim Pietrusky. Icon Fonts - CSS-Loader - For my article [5 Use Cases for Icon Fonts](http://css-tricks.com/five-use-cases-for-icon-fonts/) on CSS-Tricks.

index.html

<div class="wrapper">
  <span class="fontelico-spin1"></span>
  <span class="fontelico-spin3"></span>
  <span class="fontelico-spin5"></span>
</div>

<div class="complex">
  <span class="fontelico-emo-devil"></span>
  <span class="fontelico-spin4"></span>
</div>

script.js

 /**
  Icon Fonts - CSS-Loader
  
  # What? #
  For my article "5 Use Cases for Icon Fonts" on CSS-Tricks. 
  http://css-tricks.com/five-use-cases-for-icon-fonts

  # 2012 by Tim Pietrusky
  # timpietrusky.com
**/

style.css

@import url(http://weloveiconfonts.com/api/?family=fontelico);

/* fontelico */
[class*="fontelico-"]:before {
  font-family: 'fontelico', sans-serif;
}

body {
  margin:5em;
}

.wrapper {
  margin:0 auto;
  width:34em;
  height:2em;
}

span {
  float:left;
  text-align:center;
  margin:0 5em; 
  animation:load 1.337s infinite ease-out reverse;
}

.wrapper span:nth-child(2) {
  animation:load .5s infinite linear; 
}

.wrapper span:nth-child(3) {
  animation:load 1.25s infinite steps(18, end) forwards; 
}

@keyframes load {
  0% {
    transform: rotate(0) scale(1, 1);
    color:rgba(0, 0, 0, .5);
  }
  10% { color:rgba(0, 120, 0, .5); }
  20% { color:rgba(0, 120, 120, .5); }
  30% { color:rgba(120, 120, 0, .5); }
  40% { color:rgba(0, 0, 120, .5); }
  50% {
    transform: rotate(180deg) scale(1.85, 1.85);
    color:rgba(120, 0, 0, .5);
  }
  100% {
    transform: rotate(360deg) scale(1, 1); 
    color:rgba(0, 0, 0, .5);
  }
}

.complex {
  position:relative;
  font-size:2em;
  height:2em;
  width:2em;
  position:relative;
  margin:0 auto;
  margin-top:2.75em;
}

.complex span:nth-child(1),
.complex span:nth-child(2) {
  position:absolute;
  margin:0;  
  width:1em;
  height:1em;
}

.complex span:nth-child(1) {
  animation:load 1.25s infinite steps(18, end) forwards; 
}

.complex span:nth-child(2) {
  font-size:3em; 
  left:-.35em;
  top:-.35em;
  color:rgba(0, 0, 0, .3);
  animation:devil 3s infinite linear reverse forwards;
}

@keyframes devil {
  0% {
    transform: scale(-1.85, 1.85); 
  }
  50% {
    transform: scale(1.85, -1.85);
  }
  100% {
    transform: scale(-1.85, 1.85); 
  }
}