Pure CSS Loading Animation

Look Ma, No Javascript!

HTML

<div id="loader">
    <div id="loader_1" class="loader"></div>
    <div id="loader_2" class="loader"></div>
    <div id="loader_3" class="loader"></div>
    <div id="loader_4" class="loader"></div>
    <div id="loader_5" class="loader"></div>
    <div id="loader_6" class="loader"></div>
    <div id="loader_7" class="loader"></div>
    <div id="loader_8" class="loader"></div>
</div>

CSS

body { margin: 20%; }

#loader {
    position:relative;
    width:240px;
    height:29px
}

.loader {
    position:absolute;
    top:0;
    background-color:#878787;
    width:29px;
    height:29px;
    border-radius:100%;
    -moz-animation-name:bounce_loader;
    -moz-animation-duration:1.4s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -moz-transform:scale(.3);
    -webkit-animation-name:bounce_loader;
    -webkit-animation-duration:1.4s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -webkit-transform:scale(.3);
    -ms-animation-name:bounce_loader;
    -ms-animation-duration:1.4s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:linear;
    -ms-transform:scale(.3);
    -o-animation-name:bounce_loader;
    -o-animation-duration:1.4s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    -o-transform:scale(.3);
    animation-name:bounce_loader;
    animation-duration:1.4s;
    animation-iteration-count:infinite;
    animation-direction:linear;
    transform:scale(.3);
}

#loader_1 {
    left:0;
    -moz-animation-delay:0.56s;
    -webkit-animation-delay:0.56s;
    -ms-animation-delay:0.56s;
    -o-animation-delay:0.56s;
    animation-delay:0.56s;
}

#loader_2 {
    left:30px;
    -moz-animation-delay:0.7s;
    -webkit-animation-delay:0.7s;
    -ms-animation-delay:0.7s;
    -o-animation-delay:0.7s;
    animation-delay:0.7s;
}

#loader_3 {
    left:60px;
    -moz-animation-delay:0.84s;
    -webkit-animation-delay:0.84s;
    -ms-animation-delay:0.84s;
    -o-animation-delay:0.84s;
    animation-delay:0.84s;
}

#loader_4 {
    left:90px;
    -moz-animation-delay:0.98s;
    -webkit-animation-delay:0.98s;
    -ms-animation-delay:0.98s;
    -o-animation-delay:0.98s;
    animation-delay:0.98s;
}

#loader_5 {
    left:120px;
    -moz-animation-delay:1.12s;
    -webkit-animation-delay:1.12s;
    -ms-animation-delay:1.12s;
   ...