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

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!