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.

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.

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

Thanks

Pau



On Wed, Nov 14, 2012 at 6:49 AM, Daniel Friesen <daniel@nadir-seen-fire.com> wrote:
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:
Hi,

I added another pattern to the catalog. It is a loading indicator: http://commons.wikimedia.org/wiki/File:Loading_indicator_pattern.png

I tried to keep it simple and make it fit different background chromes.

Feedback is welcome

Pau

--
Pau Giner
Interaction Designer
Wikimedia Foundation



_______________________________________________
Design mailing list
Design@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design




--
Pau Giner
Interaction Designer
Wikimedia Foundation