@asika32764 Did you test it?
@test: Replaced the gif image and the Joomla! logo now shows as a loading gif. Looks awesome

Oh no, I just think it is a good change. :)

2014-06-21 16:09 GMT+08:00 RolandD notifications@github.com:

@asika32764 https://github.com/asika32764 Did you test it?
@test https://github.com/test: Replaced the gif image and the Joomla!
logo now shows as a loading gif. Looks awesome [image: ]

—
Reply to this email directly or view it on GitHub
#3813 (comment).

Best Regard

Simon Asika | Kwang Po Tung | 董冠伯

• Founder: Asikart Extension http://ext.asikart.com/

• CTO: SMS Taiwan http://www.bm-sms.com.tw/

• Mobile: 886-928-565-747

• Github: https://github.com/asika32764

@asika32764 Just checking so we know how many people have tested the change ;)

I have created a feature tracker for this:
http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_item_id=33892

I only see one issue. It works fine in Chrome, but in IE it doesn't animate well when uploading a package. This is also the case for the old icon, but due to the design it's still clear that something is loading, even if it's not animated.

With the proposed design it's only a static Joomla logo without any meaning as long as it's not animated.
So maybe it can be improved a bit to indicate that it's a loading image even if it's not animated?

I would prefer the initial color set to light grey and as the animation goes the colors come along...

I was not able to install the patch using patch tester...
So do it in manual.
I would prefer to used an animated .png which allows nicer transparence (and better to seat each site design (admin and front-end, dark or light design)).
In my opinion, animated png much modern than gif ;-)

But the idea is good and nice!
@test ok on firefox for me.(mac) But i recommend an little improvement of design (light grey as dgt41 prefer is a good idea!)

@Bakual Interesting, apparently IE is as finicky when it comes to gifs as it is with everything else. I wonder if there's something that can be done about this? It seems that IE doesn't like to animate gifs that entered the DOM as 'hidden'.

As for @dgt41 suggestion, it would be a simple enough change, but I'm not sure if it would necessarily be better. Might be something to explore, maybe even a monochromatic spinner?

I agree wih @JoomliC that that png files have much nicer transparency, but animated png files (apng) is a non-standard format that is not widely supported, and would therefor require something more like a java-animated sprite, which would add to complexity and overhead imo.

@coaleb yes, you're right, bad suggestion...

Or maybe an animated vector icon (supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 12.1+, Internet Explorer 6.0+, iOS Safari3.2+, Android Browser 3.0+, Blackberry Browser 7.0+) ?

I like those http://tobiasahlin.com/spinkit/ but they are css3...

@coaleb , great idea, Brian! I really like it.

@dgt41 very nice! But yes, many browsers STILL don't fully support CSS 3 sigh

OK guys, this is sort of a lame solution to the Internet Explorer problem, but I've tried it, and it does seem to work.

The problem: When a form is submitted, Internet Explorer expects navigation to another page, so animations and scripts are frozen, including our ajax-loader.gif file.

The solution is to add the image after the form is submitted, and this only seems to work as an inner html element (not a background image). So part of the Joomla.submitbutton function would be:

jQuery('#loading').html('');

or some such, and

.css("background", "rgba(255, 255, 255, .8) url('../media/jui/img/ajax-loader.gif') 50% 15% no-repeat")

would be removed from the jQuery(document).ready(function($) function.

It's rough, but it does work across every browser I've tried so far.

Would that work in all instances where the image is loaded?

Another thought. Maybe if the image has some sort of gradient like the old one. For example two of the J are greyscale, one is less saturated like currently and one is full saturated. And that would run around.

@Bakual no it's a really imperfect solution, as Internet Explorer implements it inconsistently. Sometimes it works, sometimes it doesn't. Also, the web installer uses the Joomla.submitbutton5 function which I can not find anywhere in the source code, which leads me to believe it's triggered remotely (and thus un-editable).

As for alternate versions, at least four have been discussed now: The original, monochromatic, grey w/ 1 color at a time, and de-saturated - any suggestions as to how we'll determine which will be the final? At the very least we'll need to find some way to visually compare the alternatives, and a pull request may not be the appropriate venue.

@coaleb Your proposal is awesome, Thank you! It gives an awesomely nicely-surprised feeling of a polished CMS when installing extensions, and i'm sure it will give encourage developers to use it for other lengthy tasks like the installer (which is very important UX-wise) or content-batch-processes. It's already times better than the existing one. Up to now nobody cared, but now that the spotlight is there, lots of ideas and suggestions come. As usual we can discuss at lenghts about variants which could be 101 times better instead of times. But is it worth discussing? I would suggest that we just give a time-frame for alternate proposals if any, check if it's worth implementing something for IE (either by Javascript, or just by combining the old and new images, e.g. the circle turning around the joomla logo, so it's clear also when not moving that it's a wait icon) then just merge the consensus.

btw. If that can help you show alternate solutions: Images can be drag and dropped to github descriptions (which are editable).

Thanks for your contributions, and it's a from me for a more warm-feeling waiting logo for sure.

OK, here's a possible solution to the IE problem, it's all smoke and mirrors, but it involves the least change in code and works consistently in every install method and browser. Basically, we change this:

form.submit();

to this:

setTimeout(function(){form.submit();}, 2000);

All this does is to tell the function to wait a second before submitting the form, giving Internet Explorer a chance to animate the gif before the form is submitted. It still freezes once the form is submitted, but at least it animates long enough for you to get the idea that it is a preloader.

I understand that would work for IE but i'm not hot at all for adding 2 seconds to installations. Maybe having something like the old around the new icon combined would clarify the meaning of the icon for IE users ?

I agree it's not an ideal solution. Personally I'm not crazy about the idea of adding the old spinner around the new one - just seems like it would be too busy, imo. At any rate, fixing the IE bug is outside the scope of this pull request. Hopefully a more elegant solution will present itself in the near future.

OK so at the request of the marketing team I've replaced the original file with one that has a slightly less saturated red (I can barely tell the difference myself), but in response to all the other ideas voiced in this thread, I'm attaching possible alternatives. The original one is still my favorite, but it's always good to hear different perspectives:

I think first one looks best when animated. The last one seems to turn to fast and looks like a disco to me. It may look better if it has the same speed as the others.
When not animated (in IE) I think the last one indicates best a "movement"

I agree with @Bakual about the speed of the last one. I do like the red of the second one a bit more than the first.

"I do like the red of the second one a bit more than the first."

We don't have a choice do we? The logo colours etc are specified in our Brand Manual :

http://opensourcematters.org/images/logos/Joomla_Brand_Manual_10-02-2005.pdf

Very true @Hils. We shouldn't have a choice if we have brand manual.

@coaleb More i look, more i love your idea!
Finally... (thanks your 4 versions!), in my opinion, the first one is the best one.

OK so at the request of the marketing team I've replaced the original file with one that has a slightly less saturated red (I can barely tell the difference myself)
In fact, it could be better to get the exact HEX colors used in the official logo (for legal purpose)

When picking colors from this official logo :
http://www.opensourcematters.org/images/stories/logos/conditional-use/mw_joomla_logo.png

I get,
ORANGE : #fc8e30
RED : #e52929
BLUE : #0f6eac
GREEN : #5aa427
@Hils

EDIT!

[Quote "@Hils"] We don't have a choice do we? The logo colours etc are specified in our Brand Manual :
http://opensourcematters.org/images/logos/Joomla_Brand_Manual_10-02-2005.pdf

Thank you @Hils for your useful link!
So, the correct color values :

RGB CONVERSION VALUES

RED : R: 237 G: 46 B: 56
BLUE : R: 87 G: 138 B: 214
ORANGE : R: 235 G: 173 B: 20
GREEN : R: 97 G: 91 B: 26

WEB CONVERSION VALUES

RED : Hex #ED2E38
BLUE : Hex #578AD6
ORANGE : Hex #EBAD14
GREEN : Hex #61BF1A

END EDIT

But having the official value when logo was trademarked is the best way to follow ;-)

The colors were suggested and provided by the Joomla Marketing team, and you may be surprised to know that the red is exactly the same in all four examples. I made the fourth a little faster because it just looked... weird... at the slower speed. Suffice to say it doesn't look much better at the faster speed. The alternating hues & saturation values make it way too busy.

I'm still sticking with the first one as my favorite. Clean, simple & on brand.

My vote goes to the first logo

Lets get more Joomla into Joomla
Merged. Thanks all for the feedback!