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
<https://bugzilla.wikimedia.org/show_bug.cgi?id=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 <https://github.com/wikimedia/agora>, 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.
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