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 Android):

How can I do it in CSS without images?

Answer 1

I can't seem to do it without images either.

I managed to make a true replication of the Holo spinner as defined in AOSP with just two images for the outer and inner gradients. Here's a fiddle.

The problem is that those two images have a "polar" gradient: they start from one color at 0° which gradually blends into a second color when going around the circle. There's a sharp color change at 0° where the two colors meet. I don't know if there's any way to create such gradient in CSS using just linear-gradients or radial-gradients.

UPDATE I got working with no images, yay! Check out the fiddle.

I approximated each polar gradient using two halves of a linear gradient. Some disadvantages of this approach:

• The color fading is not perfect. Colors fade along the vertical axis instead of along the angle.
• There's a small glitch where the two halves meet up at the bottom, as they give slightly different colors to points on the same horizontal line. This becomes more noticeable as the stroke width of the spinner increases.

For small spinners - which is the usual use case - it works just fine and it looks great!

Answer 2

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.

<div class="spinner"></div>

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