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;
}

.loading {
    position: relative;
    width: 96px;
    height: 96px;
}

.loading > div {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    animation-duration: 5s;
    -webkit-animation-duration: 5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}

.outer {
    background: url(http://yuku-android-util.googlecode.com/git-history/148f949b61febb228e564f36af3a8956814a090c/ActionBarSherlock4/res/drawable-xhdpi/abs__spinner_48_outer_holo.png);
    animation-name: rotate-outer;
    -webkit-animation-name: rotate-outer;
}

.inner {
    background: url(http://yuku-android-util.googlecode.com/git-history/148f949b61febb228e564f36af3a8956814a090c/ActionBarSherlock4/res/drawable-xhdpi/abs__spinner_48_inner_holo.png);
    animation-name: rotate-inner;
    -webkit-animation-name: rotate-inner;
}

@keyframes rotate-outer {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        transform: rotate(1080deg);
        -moz-transform: rotate(1080deg);
        -webkit-transform: rotate(1080deg);
    }
}

@keyframes rotate-inner {
    0% {
        transform: rotate(720deg);
        -moz-transform: rotate(720deg);
        -webkit-transform: rotate(720deg);
    }
    100% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes rotate-outer {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(1080deg);
    }
}

@-webkit-keyframes rotate-inner {
    0% {
        -webkit-transform: rotate(720deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}