Android Holo Loading Indicator

http://stackoverflow.com/questions/16250260/android-holo-loading-spinner-in-css/16250775

by MattiasBuelens

HTML

<div class="loading">
    <div class="outer"></div>
    <div class="inner"></div>
</div>

CSS

body {
    background: #888;    /* container background */
    padding: 12px;
}
/* Loading indicator */
 .loading {
    position: relative;
    width: 72px;    /* diameter */
    height: 72px;    /* diameter */
}
.outer, .inner, .loading:after {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
/* Mask */
 .loading:after {
    content:" ";
    margin: 10%;    /* stroke width */
    border-radius: 100%;
    background: #888;    /* container background */
}
/* Spinning gradients */
 .outer, .inner {
    animation-duration: 5s;    /* speed */
    -webkit-animation-duration: 5s;    /* speed */
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}
.outer {
    animation-name: rotate-outer;
    -webkit-animation-name: rotate-outer;
}
.inner {
    animation-name: rotate-inner;
    -webkit-animation-name: rotate-inner;
}
/* Halfs */
 .outer:before, .inner:before, .outer:after, .inner:after {
    position: absolute;
    top: 0;
    bottom: 0;
    content:" ";
}
/* Left half */
 .outer:before, .inner:before {
    left: 0;
    right: 50%;
    border-radius: 72px 0 0 72px;    /* diameter */
}
/* Right half */
 .outer:after, .inner:after {
    left: 50%;
    right: 0;
    border-radius: 0 72px 72px 0;    /* diameter */
}
/* Half gradients */
 .outer:before {
    background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.0), hsla(0, 0%, 100%, 0.5));
    background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, 0.0), hsla(0, 0%, 100%, 0.5));
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.0), hsla(0, 0%, 100%, 0.5));
}
.outer:after {
    background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 1.0), hsla(0, 0%, 100%, 0.5));
    background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, 1.0), hsla(0, 0%, 100%, 0.5));
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%,...