icon fonts - loader

by cranes

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<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>

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;
}

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

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

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

@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:4em;
}

.complex .fontelico-emo-devil,
.complex .fontelico-spin4 {
  position:absolute;
  margin:0;  
  width:1em;
  height:1em;
}

.complex .fontelico-emo-devil {
    animation:load 1.25s infinite steps(18, end) forwards; 
}

.complex .fontelico-spin4 {
  font-size:3em; 
  left:-.35em;
  top:-.35em;  
  animation:devil 3s infinite linear reverse forwards;
}

@keyframes devil {
    0% {
      transform: scale(-1.85, 1.85); 
      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: scale(1.85, -1.85);
      color:rgba(120, 0, 0, .5);
    }
    100% {
      transform: scale(-1.85, 1.85); 
      color:rgba(0, 0, 0, .5);
    }
}