On 12-11-15 8:02 AM, Pau Giner wrote:

Hi Daniel,

I'm happy you like the loading indicator.

The implementation I created was a quick hack to show the animation. As you commented, the ideal solution should be friendly with high resolution displays, support old browsers, and not be js intensive.

According to what I saw on bug 32101 it seems that there is still no consensus on how to better achieve the above requirements.

A loader should generally only ever happen on a page where JS is enabled so deciding how to handle this situation is much easier.
This stuff is made up of simple shapes so vector graphics are the cleanest way to implement this. And since we're in JS we can easily test capabilities and switch to VML when in an SVG-less IE.
And best performance is naturally done through using the best available css.

In any case, feel free to submit your initial implementation to the Agora repository at GitHub, and fallbacks/adjustments can be added later to better support different platforms.

Mine so far is just an experiment. Mostly a prototype for the SVG and one of the types of css that the JS would generate.
I'd love to write the actual implementation with the SVG, VML, JS fallbacks, etc...
But sadly I don't have the free time to build something like that outside of work.

The svg I created for the circular indicator is available at http://commons.wikimedia.org/wiki/File:Loading_indicator_circle.svg

I revised my experiment based on that with better sizes, colours, and arcs instead of layered circles.

<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="37px" height="37px" version="1.1">
    <path d="M18,18 m 17.5,0 a 17.5,17.5 0 0 1 -35,0 a 17.5,17.5 0 0 1 35,0 z m -5,0 a 12.5,12.5 0 0 1 -25,0 a 12.5,12.5 0 0 1 25,0 z" fill="#000" stroke="#565656" stroke-width="0.5" style="fill-rule: evenodd;" stroke-opacity="0.19607" fill-opacity="0.083"></path>
    <path d="M18,18 m 15,0 a 15,15 0 0 0 -15,-15" stroke="#36B" fill="transparent" stroke-linecap="round" stroke-width="2" class="spin" style="-webkit-transform-origin: 18px 18px;"></path>
</svg>

That SVG could be extrapolated from something like:
diameter = 35
border = 0.5
ringwidth = 5
gap = 1
<svg width="{ceil([diameter]/2)*2+[border]*2}" height="{ceil([diameter]/2)*2+[border]*2}" version="1.1">
    <path d="M{[diameter]/2+[border]},{[diameter]/2+[border]} m {[diameter]/2},0 a {[diameter]/2},{[diameter]/2} 0 0 1 -{[diameter]},0 a {[diameter]/2},{[diameter]/2} 0 0 1 {[diameter]},0 z m -{[ringwidth]},0 a {([diameter]-[ringwidth]*2)/2},{([diameter]-[ringwidth]*2)/2} 0 0 1 -{[diameter]-[ringwidth]*2},0 a {([diameter]-[ringwidth]*2)/2},{([diameter]-[ringwidth]*2)/2} 0 0 1 {[diameter]-[ringwidth]*2},0 z" fill="#000" stroke="#565656" stroke-width="{[border]}" style="fill-rule: evenodd;" stroke-opacity="0.19607" fill-opacity="0.083"></path>
    <path d="M{[diameter]/2+[border]},{[diameter]/2+[border]} m {[diameter]/2-[ringwidth]/2},0 a {[diameter]/2-[ringwidth]/2},{[diameter]/2-[ringwidth]/2} 0 0 0 -{[diameter]/2-[ringwidth]/2},-{[diameter]/2-[ringwidth]/2}" stroke="#36B" fill="transparent" stroke-linecap="round" stroke-width="{[ringwidth]-[gap]*2-[border]*2}" class="spin" style="-webkit-transform-origin: {[diameter]/2+[border]}px {[diameter]/2+[border]}px;"></path>
</svg>
ie: This should even be variable by size, bordering, gap, etc...

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

Thanks

Pau