A CodePen by Tim Pietrusky. Shitty Clown Loader - Just another loader animation shit. If there were not enough already... Looks like my avatar, isn't it? o_O

index.html

<!--
  Shitty Clown Loader

  Just another loader. If there were not enough already...
  

  2012 by Tim Pietrusky
  timpietrusky.com
-->

<ul role="clown-loader">
	<li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

script.js

/*
 * I'm sorry, but this CodePen uses -webkit-filter, which is 
 * Chrome and Safari only :(
 * 
 * I activated "Prefix free" and added filter, so that it will
 * work in future browsers. (hopefully :D)
 *
 * ★ Tim
 * 
 */

style.css

body {
  background:#000;
  box-sizing:border-box;
}

ul[role="clown-loader"] {
  width:800px;
  height:125px;
  margin: 5px auto;
  padding:0;
  background: transparent;
  list-style:none;
  text-align: justify;
  border-radius:100%;
  font-size: 0;
}

ul[role="clown-loader"]:after {
  content: '';
  width: 100%;
  display: inline-block;
}

ul[role="clown-loader"] li {
  width: 80px;
  height: 80px;
  margin:15px 5px;
  display: inline-block;
  border-radius:100%;
  background: #000;
  box-shadow: none;
  
  transform: scale(.35) translateY(-20px);
  animation: percents 2.5s infinite ease-out;
}

ul[role="clown-loader"] li:nth-child(1) {
  animation-delay:.25s;
}

ul[role="clown-loader"] li:nth-child(2) {
  animation-delay:.5s;
}

ul[role="clown-loader"] li:nth-child(3) {
  animation-name: percents-blue;
  animation-delay:.75s;
}

ul[role="clown-loader"] li:nth-child(4) {
  animation-name: percents-blue;
  animation-delay:1s;
}

ul[role="clown-loader"] li:nth-child(5) {
  animation-name: percents-yellow;
  animation-delay:1.25s;
}

ul[role="clown-loader"] li:nth-child(6) {
  animation-name: percents-yellow;
  animation-delay:1.5s;
}

ul[role="clown-loader"] li:nth-child(7) {
  animation-name: percents-green;
  animation-delay:1.75s;
}

ul[role="clown-loader"] li:nth-child(8) {
  animation-name: percents-green;
  animation-delay:2s;
}

/**
 * Animation stuff
 */
@keyframes percents {
 	0%, 35% { 
    -webkit-filter:blur(15px);
    filter:blur(15px);
    background: #520C16;
  	box-shadow: 
      0 0 20px #520C16,
      0 0 30px #520C16,
      0 0 40px #520C16;
  }
  20% { 
    -webkit-filter:blur(0);
    filter:blur(0);
    background:#D11415;
    box-shadow: 
      0 0 50px #D11415,
      0 0 60px #D11415,
      0 0 70px #D11415;
    
    transform:scale(1) translateY(60px);
  }
}

@keyframes percents-blue {
 	0%, 35% { 
    -webkit-filter:blur(15px);
    filter:blur(15px);
    background: #1175E4;
  	box-shadow: 
      0 0 20px #1175E4,
      0 0 30px #1175E4,
      0 0 40px #1175E4;
  }
  20% { 
    -webkit-filter:blur(0);
    filter:blur(0);
    background:#1175E4;
    box-shadow: 
      0 0 50px #1175E4,
      0 0 60px #1175E4,
      0 0 70px #1175E4;
    
    transform:scale(1) translateY(60px);
  }
}

@keyframes percents-yellow {
 	0%, 35% { 
    -webkit-filter:blur(15px);
    filter:blur(15px);
    background: #FEF22C;
  	box-shadow: 
      0 0 20px #FEF22C,
      0 0 30px #FEF22C,
      0 0 40px #FEF22C;
  }
  20% { 
    -webkit-filter:blur(0);
    filter:blur(0);
    background:#FEF22C;
    box-shadow: 
      0 0 50px #FEF22C,
      0 0 60px #FEF22C,
      0 0 70px #FEF22C;
    
    transform:scale(1) translateY(60px);
  }
}

@keyframes percents-green {
 	0%, 35% { 
    -webkit-filter:blur(15px);
    filter:blur(15px);
    background: #7BE417;
  	box-shadow: 
      0 0 20px #7BE417,
      0 0 30px #7BE417,
      0 0 40px #7BE417;
  }
  20% { 
    -webkit-filter:blur(0);
    filter:blur(0);
    background:#7BE417;
    box-shadow: 
      0 0 50px #7BE417,
      0 0 60px #7BE417,
      0 0 70px #7BE417;
    
    transform:scale(1) translateY(60px);
  }
}