Android Holo loading spinner in CSS

Question

I need to know how can I make the Android Holo loading spinner in CSS without images. I\'ve tried, but I don\'t know how can I do it. This is what I need (animated, like in Andr

Answer 1

Demo

http://jsfiddle.net/7cGc3/4/

I can get the spinning effect with pure CSS. More advanced effects are possible (see below), but the limiting factor is that this technique relies on a rectangular clipping region.

_{You should see this (animated, of course) in Chrome, IE10, FF. IE9 looks correct but won't animate. Safari needs a slightly modified version.}

Sandbox for more elaborate effects (webkit only, more similar to accepted answer): http://jsfiddle.net/7cGc3/5/

---

Code

_{Vendor prefixes omitted for brevity.}

HTML

The HTML is extremely simple.

CSS

The important pieces here are border-radius, clipping, and animation.

.spinner{
    width: 100px;
    height: 100px;
    border-radius: 54px;
    border: 4px solid #999;
    position: relative;
}

.spinner:after {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    border: 4px solid #fff;
    border-radius: 54px;
    height: 100px;
    width: 100px;
    clip: rect(0px, 60px, 50px, 0px);

    animation: rotate 2s;  
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}