CSS3 Spinner

by jacobdubail

HTML

<div id="spinner">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

#spinner {
    position: relative;
}

@-webkit-keyframes spinner {
    0%{ background-color: #ccc; }
    50% { 
        background-color: #ed5931; 
        -webkit-box-shadow:  0px 0px 5px rgba(0,0,0,.7);
    }
    100% { 
        background-color: #ccc; 
        -webkit-box-shadow: none;
    }
}

@-moz-keyframes spinner {
    0%{ background-color: #ccc; }
    50% { 
        background-color: #ed5931; 
        -moz-box-shadow:  0px 0px 2px rgba(0,0,0,.7);
    }
    100% { 
        background-color: #ccc; 
        -moz-box-shadow:  none;
    }
}

@keyframes spinner {
    0%{ background-color: #ccc; }
    50% { 
        background-color: #ed5931; 
        box-shadow:  0px 0px 5px rgba(0,0,0,.7);
    }
    100% { 
        background-color: #ccc; 
        box-shadow:  none;
    }
}

#spinner div { 
    width: 2px;
    height: 15px;
    background-color: #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    left: 12px;
    top: 0;
    -webkit-animation-name: spinner;
    -webkit-animation-duration: 1.1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: spinner;
    -moz-animation-duration: 1.1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    animation-name: spinner;
    animation-duration: 1.1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

#spinner div:nth-child(0) { 
    -webkit-transform: rotate(0deg) translate(0, 0); 
    -moz-transform: rotate(0deg) translate(0, 0); 
    transform: rotate(0deg) translate(0, 0); 
}
#spinner div:nth-child(1) { 
    -webkit-transform: rotate(30deg) translate(4px, 0px); 
    -webkit-animation-delay: .1s;
    -moz-transform: rotate(30deg) translate(4px, 0px); 
    -moz-animation-delay: .1s;
    transform: rotate(30deg) translate(4px, 0px); 
    animation-delay: .1s;
}
#spinner div:nth-child(2) { 
   ...