I like the design.

For the final though it would be nice to see it minimizing the calls to JS to do the actual animation.
Heck, we could probably eliminate the image just about entirely.

- Use svg + css transforms + css animations in supporting browsers (IE10, Chrome, Firefox, ...)
- Fallback to svg + css transforms + css transitions with a callback to restart the transition at the end in supporting browsers (optional, animation over transition support is more mature than I remember)
- Fallback to svg + css transforms + js timeouts in supporting browsers (IE9)
- Fallback to VML in supporting browsers (IE8 and below)
- Fallback to an animated .gif in the worst case scenario (generally shouldn't happen)

Using svg + css will allow us to have high resolution (no hidpi issues), in the best case scenario avoid js loops entirely, and get the benefit of hardware acceleration.
((Oh on that topic I hear you may want to use 3d transformations when available even thought we're doing 2d. Apparently using the 3d ones triggers hardware acceleration in some cases the 2d transformations don't))

For reference this is what I got so far for a svg experiment in webkit:
<style>
.spin {
    -webkit-animation: spin 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
 
    to {
        -webkit-transform: rotate(360deg);
    }
}
</style>
<svg width="200px" height="200px" version="1.1">
    <circle cx="100" cy="100" r="35" fill="transparent" stroke="#000" stroke-width="10" stroke-opacity="0.21"></circle>
    <circle cx="100" cy="100" r="30" fill="transparent" stroke="#565656" stroke-width="1" stroke-opacity="0.5"></circle>
    <circle cx="100" cy="100" r="40" fill="transparent" stroke="#565656" stroke-width="1" stroke-opacity="0.5"></circle>
    <path d="M100,100 m 35,0 a 35,35 45 0 0 -35,-35" stroke="#36B" fill="transparent" stroke-linecap="round" stroke-width="5" class="spin" style="-webkit-transform-origin: 100px 100px;"></path>
</svg>

The colors detailed inside the image may be off from reality.

~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name]

On 12-10-30 10:35 AM, Pau Giner wrote: