Facebook "loading" - HTML/CSS only

:: live > http://jsfiddle.net/rnxn/t67bg/ ::

.load {
    visibility: hidden;
    width: auto; height: auto;
    display: inline-block;
    padding: 6px;
    position: absolute; top: 50%; left: 50%;
    margin-top: -20px; margin-left: -35px;
}
.spin-it {
    display: block;
    height: 20px; width: 20px;
    background: rgba(17, 176, 125, 1);
    border: 0 none;
    float: left;
    margin: 0 4px;
    animation: spin 1s infinite;
    -moz-animation: spin 1s infinite;
    -webkit-animation: spin 1s infinite;
}
@keyframes spin{
    0%  { opacity: 0; }
    50% { opacity: 1; transform: scaleY(2); }
    100%{ opacity: 0; }
}
@-webkit-keyframes spin{
    0%  { opacity: 0; }
    50% { opacity: 1; -webkit-transform: scaleY(2); }
    100%{ opacity: 0; }
}
.load .spin-it:nth-child(1) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;

}
.load .spin-it:nth-child(2) {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
.load .spin-it:nth-child(3) {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.load .spin-it:nth-child(4) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.load .spin-it:nth-child(5) {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    animation-delay: 0.4s;
}