Update Drupal's default throbber icons

Can we replace it w/an CSS3 animated throbber? That'll look good everywhere.

+1

You don't need a "retina" display to know this is true!

Don't forget about SVG!

print theme('throbber');

Oops! That won't work... forgot we were talking about Drupal 8!

;)

Cross posting #2091939: Add the loading throbbers to the Seven style guide

I'm really keen on #1847916: Replace the ajax-progress-throbber div with a class but we wouldn't be able to animate pseudo elements with CSS. It would be great to throw some ideas/inspiration around.

It seems to me that the reality is that the most versatile solution is to provide two animated gifs as a css background image, one twice the size of the other targeted to browsers and devices that need higher res versions using a combination of media-queries and background-size.

On #2032773: Use Libricons (icon font) in Seven, consider using it more broadly in core, someone throws out that they should add a throbber to the icon font being worked on by ry4n, but from what I can tell, getting the placement right is extremely challenging to do (but this shouldn't stop us if it is in fact possible). Has anyone really seen a perfectly placed throbber glyph in an icon font that rotates with zero noticeable axis alignment issues, even at a large font size of say 100px?

Updated issue summary.

As @rupl mentioned in #3, SVG might be the better solution. and according to http://caniuse.com/svg, everything that Drupal core supports is also supporting SVG.

Something like this SVG throbber used by Google Chrome:

http://plnkr.co/8J9s84ZH24OodIx75L5k

I've updated issue summary. At this point what needs to happen next is some cross browser testing of the <animateTransform> tag in an SVG, to ensure we don't have any breakage across an array of the supported os-platforms/browser-versions/devices.

@jwilson3 I did a BrowserStack test on that link above and it doesn't animate on IE9-11 on Windows 7 unfortunately.

Also here's reference saying it's not supported from the source:
@see http://msdn.microsoft.com/en-us/library/ie/gg193979%28v=vs.85%29.aspx#ex...
And
@see http://caniuse.com/#feat=svg-smil

Maybe there is a nice CSS3 rotate that can work well or in the link above they have a decent requestAnimation frame javascript to rotate the svg, is that an option? You may need a IE9 polyfill for these:
@see http://caniuse.com/#search=animation

I ran the requestAnimation frame javascript example (http://samples.msdn.microsoft.com/workshop/samples/svg/svgAnimation/basi...) through BrowserStack, and it failed to animate on IE9.

On the other hand, as long as we're talking polyfills, there is http://leunen.me/fakesmile/ which did work on IE9 -- but was seriously slow to load.

I feel like we should be courteous to the non-compliant browsers and give them a gif fallback, since CSS animation itself doesn't work in IE9 or earlier.

@jwilson3 I'm not sure who to talk to on getting another polyfill in there but I'm game for that. Since SMIL is in the SVG maybe we can do a gif fallback instead of the polyfill, do we have any .lt-ie10 style html classes to target that animated gif?

Here is a quick little snippet for SASS and svg I put together for a D7 site if anybody want's to play:)
https://gist.github.com/joelpittet/c75ff7c2f86282ff9499

Yeah, I'm sticking with my feeling that a polyfill is the wrong solution in this case.

As for an lt-ie10 class, we don't have that, but do have the conditional functionality built into drupal_add_css. SMIL isnt supported in IE 11 either, so this would have to be lte-ie11.

drupal_add_css('/core/misc/throbber.fallback.css',
  array(
    'browsers' => array(
      'IE' => 'lte IE 11',
      '!IE' => FALSE
    )
  )
);

The only other browser that has problems with SMIL is Opera Mini. :'( I haven't thought of a proper solution that will work in that case yet.

Tangentially, I took your gist and ran with it to make a couple small improvements: https://gist.github.com/jameswilson/d40d303c9cf24051d332

I think the only solution really is to use Modernizr tests for smil and svg, which would address both opera mini and IE support.

http://modernizr.com/download/#-smil-svg

.is-throbbing {
  background-image: image-url('svg/throbber.gif');
}

html.svg.smil .is-throbbing,
html.svg.smil .is-throbbing {
   background-image: image-url('svg/throbber.svg');
}

^ this is a progressive enhancement to SVG, instead of fallback to GIF, we could do it the other way around too. Not sure which is better and the final solution depends on minimizing the effect of modern browsers downloading *both* assets as opposed to just the one that it needs (ie, the tax on double asset download should, in this case go to non-modern browsers).

Currently, the version of modernizer in Drupal core does not test for smil or svg, so we'd need to add that, however I don't think this is a bad idea. Given the direction svg is going right now as the defacto solution to high-quality web graphics for retina display and zoom, many themers will want to have that test around anyway, and having it there by default could be great.

./assets/vendor/modernizr/modernizr.js:2: * Build: http://modernizr.com/download/#-inputtypes-touch-cssclasses-addtest-test...

EDIT: updated classnames to reflect comment below.

But it's not SVG support that's the problem is it? It's a specific feature within SVG? We can't just use CSS animations here?

The class name I think would be html.svg.smil .is-throbbing or just html.smil .is-throbbing would likely do the trick, no?

http://modernizr.com/docs/#smil

Yes, sorry for the confusion... i meant "smil" instead of "animate" for the classname on the html element. I edited the example code in comment #14 to reflect that.

html.smil .is-throbbing would likely do the trick, no?

Yes it would, I thought html.svg.smil is clearer.

But it's not SVG support that's the problem is it? It's a specific feature within SVG?

Correct.

We can't just use CSS animations here?

Yes, good point this could be possible. Here is a little investigation on CSS animation vs SIML:

• CSS animations aren't supported in IE9 and Opera Mini: http://caniuse.com/#feat=css-animation, and so we'd still need a modernizr-based GIF fallback for older browsers.
• iOS 6.1 and below do not support CSS-animation on pseudo-elements. Core doesn't use pseudo-elements for animations anyway, so this is just anecdotal information.
• IE has sided with CSS-animations, but all the other browsers support both SIML and CSS animations.
• All webkit browsers (Chrome, Safari, Opera, Android) require -webkit-animation vendor prefixes for CSS animations, meaning duplicate code (which could get ugly for non-trivial animations with multiple keyframes). OTOH, a simple rotation throbber in CSS-animation wouldn't need *too much* extra code.
• In general, SIML animation is a more encapsulated and contained solution. Like a GIF, the animation logic is contained inside the image asset itself. So, to override the core throbber to do something other than the default clockwise rotation you'll only be required to change the background-image in CSS. The consistency and loose coupling promised here is really the primary selling point from a maintenance perspective. This also means we could still use css a single image file both the not-throbbing version AND the throbbing version and use background position to pull the animation into view, like how core's GIF does right now on auto-complete fields, thus incurring no extra HTTP requests through this issue.
• Finally, there is the point about familiarity. SVG animation syntax is newer and thus more foreign to most devs, which is not to say that it is any more *complex* than CSS animations -- just different. However, in 2014, CSS animation syntax is simply more common; there are plenty of examples online to learn from. This could mean lost time coming up to speed on *how* to animate things in SIML, but on the same note, themers will be free to override a would-be core SVG throbber using their own CSS-based animation, and give up on SVG animation if they want to.

There are some good write-ups comparing the two solutions, from a more technical perspective here and here for anyone interested.

Working on that.

Here is a first approach to that.
We were talking about adding the svg files as background images and just rotate them with css, instead of using SIML animations. The problem on that is that I think there is no way to rotate only the background image and not the element without using pseudo elements.
So I’ve uploaded a patch with a SIML animation in the active throbber, and at least we have the svg files here so can discuss that.
That is how it looks:

Another thing that needs work is IE9 back port.
Also, just to point that the inactive throbber is using the #949494 because of accessibility reasons.

Unassigning.

I've also tried to use :before or :after elements to move the throbber image with css animations, but inputs don’t work with them. I didn’t know, but those pseudo elements are only allowed to be used on a container element. You can read about that here. (But there’s anything on the W3C recommendations).

So, maybe the best option is using animation inside the svg files. And for those browsers that don’t support it we’ll still have the color change on the active state. Here is an screenshot for IE9, that doesn’t support it.

Here is the screenshot.

Remember that CSS animations doesn't working in IE9 (keyframe..etc). The only way I think is apply JS to rotate the SVG BG image.

And the SVG could be sprite image. (in the past, we splited GIF into two files for performance problem)

I had a look over this with Bojhan and it looks good, but the size of the icon is a little too big for the text field. I think we need to add this new loading icon to other areas of the site now.

It looks like loading-small.gif is referenced in:

• core/misc/dialog.theme.css
• core/modules/system/css/system.module.css
• core/themes/seven/css/components/dialog.theme.css

We should be able to remove loading.gif and loading-small.gif in this issue

Ok, then I'll work on that.

Won't give up yet but SMIL has no support in any version of IE:( There has got to be a work around here.

• SVG background on the input field seems to be the cleanest approach. Input elements don't take :after (AFAIK) so rotating pseudo elements could get messy if they have to be moved to the container for positioning.
• SMIL would be nice but support is lacking a bit too much on all IE versions and the polyfill is slow as mentioned earlier.

If we find a solution where IE9 just gets a color change without the animation but IE10 and up work, I think most of us would be happy with that solution it seems when talking to others at the conference. Speak up though if that's unacceptable for a good reason.

Maybe we can embed CSS animations in the SVG to do the animation which seems to be what IE was betting on in their short sighted decision to not support SMIL.

Going to play around, just thought I'd share my thoughts. Vectors for the scalable win!

Haven't cross browser tested this yet, but that idea:
http://jsfiddle.net/0ms01h7b/

Maybe @ckrina if you have access to IE browsers or know someone who does you could give it a try?

Bad news again... There are some troubles with Firefox. If you intert the svg in the HTML it works great, but adding it as a backround image with this styles inside doesn't seem to work: is doesn't rotate.
And it's the same in IE9 and IE10: the throbber doesn't rotate as a backround image.

Dang, well thanks for testing that @ckrina.

Hmm may need to come back to this.

Anybody feel free to share some code, something is bound to surface:)

Here is a patch with smaller icon, as @LewisNyman suggested on #25. Maybe it's not the final solution but at least we have the svg files uploaded. Here is the screenshot:

@LewisNyman: When you said that we should be able to remove loading.gif and loading-small.gif in this issue, did you mean changing the design that we are using now by this svg or moving to svg the current design? The current design is this one:

I played around with animating the throbber in JavaScript, based on http://msdn.microsoft.com/en-us/library/ie/gg193979%28v=vs.85%29.aspx. Code needs work, but I thought I'd post it in case other people want to further explore this route.

http://jsfiddle.net/1qgp8xzu/

Sorry I haven't been too active recently, I think we can get away with changing the design because it's almost required to achieve what we want.

HiDPI is the official name for screens with a higher resolution per inch. Retina is just a word created by Apple for this. Thats why I changed the tag.

.

Whoops.

So rotating the SVG as a background is a show stopper for IE as they don't support SVG animation via SMIL. See #33.

We have one viable direction:
CSS3/JS rotation of an element outside of the input (which could get tricky for positioning correctly).

Anybody want to take a stab at prototyping this on an input field?

Here's a Fiddle to start a prototype for people to play!

Needs to work cross-browser. Maybe IE9 can get a fallback?

http://jsfiddle.net/65wpyowp/

#40: that doesn't rotate in Chrome?

It's un-prefixed, just a quick prototype. Auto-prefixer for anybody that wants to run with it.

Ok, cool :) Sorry for the distraction.

The fiddle in #40 is pretty good, but the SVG can be optimized a bit further to shave some needless bytes.

The decoded svg in #40 is:

<svg class="throbber-svg" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><g class="throbber-group"><path class="arrow-1" fill="#40B6FF" d="M17.793,4.108L14.24,3.219c-0.647-0.162-1.288,0.24-1.424,0.893l-0.748,3.585c-0.136,0.653,0.215,0.897,0.78,0.543l1.656-1.038L14.6,7.171c0.704,1.161,0.983,2.576,0.641,3.997c-0.607,2.504-2.897,4.154-5.372,4.049c-0.569-0.024-0.62,0.463-0.62,0.463l-0.3,1.241c0,0-0.198,0.471,0.47,0.527c3.676,0.307,7.132-2.052,8.024-5.748c0.489-2.024,0.102-4.054-0.907-5.704l0.028-0.086l1.379-0.864C18.507,4.692,18.44,4.27,17.793,4.108z"/><path class="arrow-1" fill="#40B6FF" d="M7.228,11.636l-1.644,1.031L5.544,12.68c-0.704-1.161-0.983-2.576-0.641-3.997c0.607-2.504,2.897-4.154,5.372-4.049c0.569,0.024,0.62-0.463,0.62-0.463l0.3-1.241c0,0,0.198-0.471-0.47-0.527C7.05,2.095,3.594,4.454,2.702,8.15c-0.489,2.024-0.102,4.054,0.907,5.704l-0.021,0.065L2.134,14.83c-0.565,0.354-0.498,0.777,0.149,0.939l3.553,0.889c0.647,0.162,1.288-0.24,1.424-0.893l0.748-3.585C8.144,11.526,7.793,11.282,7.228,11.636z"/></g></svg>

Which can be reduced to:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="#40B6FF" d="M17.943,5.046L16.564,5.91l-0.028,0.086c1.009,1.65,1.396,3.68,0.907,5.704 c-0.893,3.696-4.348,6.055-8.024,5.748c-0.668-0.056-0.47-0.527-0.47-0.527l0.3-1.241c0,0,0.051-0.486,0.62-0.463 c2.475,0.105,4.765-1.545,5.372-4.049c0.342-1.421,0.063-2.836-0.642-3.997l-0.096,0.031L12.848,8.24 c-0.564,0.354-0.916,0.11-0.779-0.543l0.748-3.585c0.136-0.653,0.776-1.055,1.424-0.893l3.553,0.889 C18.439,4.27,18.507,4.692,17.943,5.046z M7.228,11.636l-1.644,1.031l-0.04,0.013c-0.704-1.16-0.983-2.576-0.641-3.997 C5.51,6.179,7.8,4.529,10.275,4.634c0.569,0.024,0.62-0.463,0.62-0.463l0.301-1.241c0,0,0.197-0.471-0.471-0.527 C7.05,2.095,3.594,4.454,2.702,8.15c-0.489,2.024-0.102,4.054,0.907,5.704l-0.021,0.065L2.134,14.83 c-0.565,0.354-0.498,0.777,0.149,0.939l3.553,0.889c0.647,0.162,1.288-0.24,1.424-0.893l0.748-3.586 C8.144,11.525,7.793,11.282,7.228,11.636z"/></svg>

add svg/gif icon for loading. svg icon - in zip archive

add gif/svg images

triggering test bot.

The patch in #47 is a patch on top of the patch in #45, and will never apply cleanly.

Besides that, I don't understand the point of the patch in #45 which uses an animated SVG since we've already established in #39 that animating SVGs are not supported in IE.

Even if there was a way to test for no-smil and fallback to a gif, this would still be less desirable than using CSS3 rotations. Modern IE supports CSS3 rotations and SVG, so we should try to leverage that, instead of forcing the gif fallback because of no SMIL support.

Let's shoot for a CSS Rotation solution first, and then work out appropriate fallbacks.

This issue needs to refocus around the D8 ajax progress throbber icon (throbber-active.gif) as stated in the issue title. The patches in #45 and #47 were for the "loading" icon, for which I've created #2575253: Update loading icon and use SVG. I'd be happy to properly review the patches above if @ellizard would like to move them to that issue so that he gets credit for the work. You may want to address my points mentioned above first though, including the fact that we cannot use SMIL (ie the <animate> functionality because it is now deprecated from Chrome, and not supported in IE).

There are 2 ways the ajax progress throbber image is currently used in core:
* As part of additional DOM elements that are dynamically added during ajax requests. These DOM elements can be rotated with CSS.
* A background image added to autocomplete fields' <input> tag. These cannot be rotated as-is with SVG and CSS rotation/animation. More importantly, the current throbber-active.gif image committed to Drupal 8 two years ago to replace throbber.gif is surprisingly no longer animated. See #1069152: Throbber in textfield is misaligned when browser hardware acceleration enabled (gfx).

I recommend the following path to move forward:

1) avoid loss of current functionality, add HiDPI support and new shiny redesigned throbber. Replace the old static GIF with the newly designed SVG as a static (non-rotating) background image for autopopulating form fields. Add CSS to animate/rotate the SVG when shown using the .ajax-progress-throbber .throbber DOM elements.
2) file a follow-up to add back support for rotation functionality to the form autocomplete field. We could actually reopen and leverage #2181399: Consider moving the animated .GIF throbber outside the autocomplete fields and using CSS animation instead. (proposal by sun) for that purpose. (That issue was closed by Lewis opting for the simple class based state change #1847916: Replace the ajax-progress-throbber div with a class but I think it makes sense to reopen and revisit).

I'm going for the simple patch to move this forward: I've removed the throbber GIFs and optimized the second SVG from Comment #44 above to optimize it and round to 2 decimal places of accuracy instead of 3 (there is no perceived loss of quality). This also required slightly changing the throbber-inactive.png (and converting it to svg).

Before:

After:

New SVG code:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
  <path fill="#40B6ff" d="M17.94,5.05l-1.38,0.86L16.54,6c1.01,1.65,1.4,3.68,0.91,5.7c-0.89,3.7-4.35,6.05-8.02,5.75 c-0.67-0.06-0.47-0.53-0.47-0.53l0.3-1.24c0,0,0.05-0.49,0.62-0.46c2.47,0.11,4.76-1.54,5.37-4.05c0.34-1.42,0.06-2.84-0.64-4 L14.5,7.2l-1.66,1.04c-0.56,0.35-0.92,0.11-0.78-0.54l0.75-3.58c0.14-0.65,0.78-1.05,1.42-0.89l3.55,0.89 C18.44,4.27,18.51,4.69,17.94,5.05z M7.23,11.64l-1.64,1.03l-0.04,0.01c-0.7-1.16-0.98-2.58-0.64-4c0.61-2.5,2.9-4.15,5.37-4.05 c0.57,0.02,0.62-0.46,0.62-0.46l0.3-1.24c0,0,0.2-0.47-0.47-0.53C7.05,2.1,3.59,4.45,2.7,8.15c-0.49,2.02-0.1,4.05,0.91,5.7 l-0.02,0.07l-1.45,0.91c-0.56,0.35-0.5,0.78,0.15,0.94l3.55,0.89c0.65,0.16,1.29-0.24,1.42-0.89l0.75-3.59 C8.14,11.53,7.79,11.28,7.23,11.64z"/>
</svg>

Upon testing it, it does add the svg, however there is no animation. I'm guessing we want an animation of the arrows spinning?

Here I've added the CSS rotation with an "is-throbbing" class and improved how the throbber works inside dropbuttons.

To test this, you can check that the spinner works on the following pages:

1. Attach an image to an article node (/node/add/article).
   
2. Enable or disable a view (/admin/structure/views) using the dropbutton.
   Collapsed
   
   
   
   Expanded
   

Looks like excluding the binary details of the image files being deleted made the patch in #57 invalid; here is a reroll with all the binary data glory.

Also, here is a little screencast gif I recorded demonstrating the new throbber in action.

Good work James
I didn't have time to go through this patch/issue. I will try to review later properly.
But I noticed file /core/modules/system/css/components/autocomplete-loading.module.css lacks CSS animation.
Patch #61 was not applying, rerolled attached.

@Corbacho: Thanks!

Regarding non-animation of autocomplete, I think this should be handled in a follow-up. Please read My comment #54 above, which explains it all.

As this patch has not committed in-time, can someone RTBC #2642362: Animation of throbber-active.gif image is broken to fix the current icon, please?

Aside, the is-throbbing class used here is currently named ui-autocomplete-loading, but I like the new name. However it may require some cleanup that is not inside this patch.

In fixing #2642362: Animation of throbber-active.gif image is broken I stumbled on this thread. The latest patch applies cleanly but since the Stable was made the default base, these changes needed to be applied there as well. The attached patch takes care of replicating the existing proposed changes over on the Stable side of things.

As a side note, in ajax-progress.module.css there is also a "Full screen throbber" section. This uses another animated .gif that might also be worth updating to SVG for the same reasons we're altering the throbber. I'd propose to do that in a separate issue, however.

Cant really make sense of what changed, your interdiff didnt seem to actually show the differences.

@jwilson3 sorry, this was my first time attempting an interdiff. I thought I had done it right, but I'll try again. Basically, I duplicated your changes within the stable theme. I'll push up a new interdiff here shortly. Stand by.

@jwilson3 actually, I think my interdiff is correct. I followed the steps found here and the resulting file was exactly the same as my previous. Perhaps this is confusing because the changes are identical but are now also occurring within the Stable theme? There weren't any changes to those that you and @corbacho applied but those were simply replicated in the equivalent files within Stable.

So changes you made in /core/misc were also made in /code/themes/stable. Does that clear things up? Or am I missing something?

The gif/png images need to be kept at least until D9.

We may safe one http request by adding both svg images into a svg-stripe-set as symbols.

We can move the improvements to Bartik/Seven though they are free to change up for 8.1.x

@chrisfree: ok, i see... missed that from your comment in #68. Thanks for the clarification.

The interdiff is really confusing, this line tripped me up, and i dont understand it:

Corbacho's code:

diff --git a/core/misc/ajax.js b/core/misc/ajax.js
index 4dba53e..0a7b0de 100644
--- a/core/misc/ajax.js
+++ b/core/misc/ajax.js
@@ -704,7 +704,7 @@
    * Sets the throbber progress indicator.
    */
   Drupal.Ajax.prototype.setProgressIndicatorThrobber = function () {
-    this.progress.element = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div></div>');
+    this.progress.element = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber is-throbbing">&nbsp;</div></div>');

Your code:

diff --git a/core/misc/ajax.js b/core/misc/ajax.js
index 225b2f0..8b57afb 100644
--- a/core/misc/ajax.js
+++ b/core/misc/ajax.js
@@ -713,7 +713,7 @@
    * Sets the throbber progress indicator.
    */
   Drupal.Ajax.prototype.setProgressIndicatorThrobber = function () {
-    this.progress.element = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div></div>');
+    this.progress.element = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber is-throbbing">&nbsp;</div></div>');

Interdiff (wat?):

diff -u b/core/misc/ajax.js b/core/misc/ajax.js
--- b/core/misc/ajax.js
+++ b/core/misc/ajax.js
@@ -704,7 +704,7 @@
    * Sets the throbber progress indicator.
    */
   Drupal.Ajax.prototype.setProgressIndicatorThrobber = function () {
-    this.progress.element = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber is-throbbing">&nbsp;</div></div>');
+    this.progress.element = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div></div>');

@jwilson3right? I spent way too much time trying to sort that out too. It makes literally zero sense. Otherwise the patch looks fine, eh?

Yes. its good aside from that, now that i actually looked to see /stable/ in the paths that changed ;) Pardon my misunderstandings, banter and general distractions.

Actually, I think we need to keep the older versions of the files instead of deleting them. I think that is what @haas is saying. So a revised patch that doesn't delete them might be in order. I could see instances where other developers might be using those paths in other contexts.

Finally getting around to recreating this patch such that it does not delete the existing gif/png files. Patch to follow shortly.

Updated patch and interdiff. This patch should do the same as the previous, only it does not delete the existing core imagery related to throbbers.

Patch in #79 worked for me in testing.

the new icon is ugly. no IE fallback ?

@droplet: I'm confused. Are you saying that this animated SVG is ugly?

Or are you saying that you are seeing something else?

As far as an IE fallback is concerned, SVG is supported back to IE9 and CSS animation is supported back to IE 10. Without being animated, we should still see the SVG. This is a reasonable fallback in my opinion.

I'm not keen on it anyway but if we wanted to support it. We can detect it from JS side and add a class name to toggle it.

+++ b/core/themes/stable/css/system/components/ajax-progress.module.css
@@ -47,3 +54,19 @@ tr .ajax-progress-throbber .throbber {
+@-moz-keyframes rotate-throbber {
+  to {-moz-transform: rotate(-360deg);}
+}
...
+@-ms-keyframes rotate-throbber {
+  to {-ms-transform: rotate(-360deg);}
+}

I believe we didn't need these 2 prefix.

@droplet: Drupal 8 doesn't support IE8, so why worry about an IE fallback when IE9 supports SVG?

@hotpizzas,
IE9 doesn't support keyframes. We can't call SVG is fallback.

No radius corners in IE is make sense, it's a basic visual change. Drop anime in a Loader icon, it's a UX problem. Is it loading ? or disconnection ?

GIF is bad, but not that bad at many case in most sites. I'm now using Macbook Retina to post. I think the GIF icon shown on this page is acceptable and better than a still image in non-retina IE9 screen.

If we all think IE9 is worthless, Let's announce it in public. It's very bad to kill IE9 silently but official said it's still supporting for marketing purpose.

Is modernizr feature detection for cssanimations a dependency we could add?

if(!Modernizr.cssanimations) {
    //jQuery rotation fallback 
}

OR

.no-cssanimation .ajax-throbber {
   background-image: url(path/to/fallback-throbber.gif);
}

Checked. The throbber is appearing correctly with the new icon. Checked with the scenario as mentioned above. Please check the attached screenshot.

This would be a slight BC break for Stable/Classy but I think it might be justifiable in 8.1.x. I'd like to give it some more thought and testing though.

In the meantime…

+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -766,14 +766,36 @@ td.group-title {
+  border-radius:  0 50% 50% 0;

Minor: Two spaces after colon. Applies to the Stable version of this file as well. Leaving at RTBC because it's very minor :)

Changes as per suggestion in #92.

Triggering the test bot

Discussed this issue with @xjm and @effulgentsia.

The safest bet here would be to not make these changes in Stable and Classy because of the BC break and only change core, Bartik, and Seven.

We can then provide instructions for how themers can use libraries-override to get this shiny goodness into their themes. Seem reasonable?

Re #97, what precicely is unsafe about swapping a gif with a rotating svg?

Could you expand upon the BC (backward compatibility? i presume) break?

@jwilson3 the CSS changes, for folks who have overridden the spinner CSS we are changing things from underneath them.

@Cottser: Ok, does that mean #2405059: Update Drupal's default menu icons to use SVG also needs to be bumped to 8.2.x?

Trying another patch without Stable changes.

@Cottser when you said to provide instructions, you mean in the code itself as comments?

I haven't looked at at the latest patch, but really like the examples in #2575253: Update loading icon and use SVG nice to revision the throbber..

Although I also like the other icons, the idea on using the suggested one was that even if it can't be animated (old IE & friends) it can be interpreted as an "update" or "loading" action anyway.

I like it!

Can we get this decided and closed off at Drupalcon?

Going to put this back to RTBC. Looked like Coster was onboard already without the Stable break, looks like this removes that issue.

Assigning this to @Cottser

It was a migrate test fail, putting back to RTBC :)

Yup this is looking much better, thanks @ckrina! What I would love to see here before committing is bringing the SVG version into Seven and Bartik for all throbbers, not just the dropbutton one.

One other idea along the lines of #97 would be to include a small library and CSS file for SVG throbbers in Stable and not load that library from Stable, only load it from Bartik and Seven via libraries-extend. This way any theme can pull in this "Throbber SVG-ify" library. Any libraries we add to the Stable base theme this way would have to remain stable once they are in. I think of it as an API addition to Stable so I think these types of changes would have to happen in minor versions not patch versions.

+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -766,14 +766,36 @@ td.group-title {
+  border-radius:  0 50% 50% 0;

Minor: Extra space after colon here (two instead of one) per https://www.drupal.org/node/1887862#properties and as mentioned in #92 (#93 didn't provide an interdiff, but also didn't fix it).

removed extra space and added interdiff.

#2775725: Update the throbber icon started independently to implement the Seven styleguide spinner. We should figure out which one to bring forward. Discussed this on the UX meeting today.

FWIW I think the spinner from #2775725: Update the throbber icon looks a lot nicer.

I'll personally believe #105 has a great point.

I discussed today with @ckrina and @alexpott and we agreed that we should change the approach taken on this issue.

The approach that we agreed on:

1. Use throbber with a minimal design from the Ajax system. We propose to use the same throbber from jQuery UI that is used on modals.
2. Override throbber for the original gif in Stable since we don't want to affect existing themes
3. Override throbber again in Bartik with a design that is reflected by Bartik
4. Ensure that overriding throbbers is as easy as possible

The reason why we want to do so is because:

1. Themes should be responsible for setting design for the throbber
2. Modules should provide minimal design and therefor shouldn't reflect Bartik or Seven
3. Overriding throbbers should be done in Core to demonstrate how its done easily
4. We don't want to give drupally feeling if a theme doesn't override the throbber

I'll work on that.

I'll work on this.

Can we try to not work on this one and #2775725: Update the throbber icon in parallel and choose one path instead of two parallel paths wasting our time? :) Please :)

No problem! We can come back to this one when #2775725: Update throbber icon in Seven theme is finished and decide if design or anything else needs to be readjusted for Bartik.
I change the status to Postponed until the other one is finished.

There has been great progress with updating the throbber icon in the new Claro theme #3087950: Progress throbber position is incorrect, so adding here for reference.

Regarding why this was marked postponed, #2775725: Update the throbber icon is dead. The Seven theme has been removed from Drupal 10 core.

I see Olivero now has a custom throbber.svg but it is not a 1-to-1 against the old original throbber-active.gif.

On this issue's sister issue #2575253: Update loading icon and use SVG, after flailing about for a long time, the consensus became to reduce scope and get to RTBC by making the replacement a 1-to-1 (same size, color and speed). I think it makes sense to do exactly the same thing here.

The old throbber-active.gif is still referenced in core by stable9 as well as core's default ajax-progress and autocomplete-loading CSS files, so there is good reason to get this updated, and the scope is tight.

I put together a codepen to compare side-by-side before/after with a fairly close 1-to-1 (speed, color, size).

I've included a second option where style is slightly different, modernized, and perhaps less "drupaly feeling".

https://codepen.io/jameswilson/pen/LYoZaXy

I prefer the original throbber (SVG rendered). It looks like a single-hand clock.

The main question being, though, can the themer change the throbber color or better yet, use her or his own SVG file?

can the themer change the throbber color or better yet, use her or his own SVG file?

Yes! This is actually one of the primary reasons this issue was postponed some time ago: i.e., in order to create an overridden/custom throbber in another core theme. See @laurii's comment #118, point 2.3

I prefer the original throbber (SVG rendered). It looks like a single-hand clock.

👍. I actually feel the same. Now that it is fairly easy for themers to override the throbber and we have an example in core already, it may be less contentious to leave the existing design as a nod to the past and a relic of our roots, as well as just a simple fact of getting to RTBC sooner.

MR appears to have test failures.

Also believe issue summary is still relevant as the current summary mentions updating bartik

I've restarted the pipeline. The test failures seem unrelated:

Drupal\Tests\node\Functional\NodeTranslationUITest             0 passes   1 fails  

    Drupal\Tests\node\Functional\NodeTranslationUITest::testSearchIndexRebuildOnTranslationDeletion
    Behat\Mink\Exception\ResponseTextException: The text "There are 0 items
    left to index." was not found anywhere in the text of the current page.

Updating issue title to distinguish it from the other issue now moved to Seven theme queue: #2775725: Update the throbber icon

That failure shows it needs a rebase. That issue was fixed last week

Rebased

Okay, I've found a valid failing test having to do with htaccess scaffold file changes ...

There was 1 failure:
    
    1) Drupal\Tests\ComposerIntegrationTest::testExpectedScaffoldFiles with
    data set #6 ('.htaccess', 'assets/scaffold/files/htaccess')
    Scaffold source and destination files must have the same contents.
    Failed asserting that two strings are equal.
    --- Expected
    +++ Actual
    @@ @@
       # Rewrite install.php during installation to see if mod_rewrite is
    working\n
       RewriteRule ^core/install\.php core/install.php?rewrite=ok [QSA,L]\n
     \n
    +  # Redirect deprecated throbbers to their SVG equivalents.\n
    +  RewriteRule ^core/misc/throbber-active\.gif$
    core/misc/throbber-active.svg [L,R=301]\n
    +  RewriteRule ^core/misc/throbber-inactive\.png$
    core/misc/throbber-inactive.svg [L,R=301]\n
    +\n
       # Pass all requests not referring directly to files in the filesystem
    to\n
       # index.php.\n
       RewriteCond %{REQUEST_FILENAME} !-f\n
    
    /builds/issue/drupal-1974928/core/tests/Drupal/Tests/ComposerIntegrationTest.php:204
    
    FAILURES!
    Tests: 60, Assertions: 421, Failures: 1, Skipped: 1.

Hiding attachments from previous approaches.

Yay. tests are passing now.

I've reorganized Remaining Tasks in issue summary.

• Moved some items from Proposed Resolution section into Remaining Tasks as Complete. These tasks are technically no longer part of the proposal and were handled elsewhere.
• Added a step to copy issue credits from folks who worked on #2775725: Update the throbber icon that was split out from this issue while Seven theme was still in core.

I've restored the legacy throbber GIF and PNG files, per @smustgrave's comment #72 on sister issue #2575253-72: Update loading icon and use SVG:

there is no mechanism for deprecating images so can only remove in a major (D12). So will need to add those images back and a CR in this ticket about the images being removed in 12

I suppose this needs a CR now, but leaving in NR for adtl code review and #frontend signoff before diving deep into CR world.

I've added this issue to the list on #3452493: [12.x] Remove images that have been replaced in core.

Wasn't ignoring this way but wanted to see how the related one was handled. Can we revert the htaccess change here as well.

Will keep an eye out for this one.

Updated the PR with the changes as per the #162, Please review.

changes removed

Committed 6aa443c and pushed to 11.x. Thanks!

Refer to the issue tag guidelines.

Belatedly adding discussion credits per #97 and #118.