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 32101https://bugzilla.wikimedia.org/show_bug.cgi?id=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 https://github.com/wikimedia/agora, 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.comwrote:
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. To see it in motion you can go to http://dl.dropbox.com/u/30377416/design/loading-indicator/loading.html
Feedback is welcome
Pau
-- Pau Giner Interaction Designer Wikimedia Foundation
Design mailing listDesign@lists.wikimedia.orghttps://lists.wikimedia.org/mailman/listinfo/design