Update the throbber icon

This looks amazing to me personally :)

Tried this on a quick test site and it works fabulous on the tags autocomplete widget. Look like this needs to be applied to AJAX too and then get some more topic-expert reviewers :)

Version move was unintentional.

Compare with #1974928: Update Drupal's default throbber icons and decide on which design and which implementation to move forward with.

It looks cool !! @AaronChristian
But In some of cases i have observe that it spin so quick that we can't figure out, Is it loading or not.

So #9 says "Replace all AJAX progress throbbers with the same SVG/GIF treatment." that to me means that work is not yet done. Also it sounds like having two throbbers in core would be bad, so I think that would be a requirement to fix in this issue?

I think it would be good to get clarity on a couple of points:

1. the ultimate goal of this issue i.e. what "done" looks like
2. what further work is required to bring it to that state

This sounds like a lot but I think really it's just process! But with this in mind I've reworded the issue description using the standard template: please feel free to edit if you don't think it matches the situation.

@GáborHojtsy could you also clarify (approximately?) what extra work you think needs doing? Is it that there are spinners that are not yet fixed by this patch? Can you suggest where?

Just tested this patch, and with a simple test creating a new Article page, trying to change the author, the throbber/loader doesn't appear.

I agree with jp.stacey. I think we are missing the point here, how it should look like?

On the UI perspective things look good. I tested multiple different use cases including Node edit form, Field UI and Block UI. Good work on that!

However, I'm afraid that we need to limit all the changes to Seven theme. That's why I'm moving this to the Seven issue queue.

I'm not sure if we can modify the throbber at all in Stable theme because it might affect themes people have built. Anyway, we don't have to deal with that here.

I'm also quite confident that we can drop the fallback gif throbber since svg images seem to be supported pretty well: http://caniuse.com/#feat=svg

#13: Seven styleguide includes design for throbbers which I believe we should here.

@jp.stacey, @vulcanr: it could very well be that your setup being local was/is too fast to respond and therefore no throbber seen, see @lauriii and I seen it work :)

#22 +1

+++ b/core/misc/autocomplete.js
@@ -213,8 +226,28 @@
+            '<svg viewBox="0 0 100 100">' +
+            '<circle stroke="#d9d9d9" stroke-width="4" fill="none" stroke-linecap="round" stroke-dashoffset="0" cx="50" cy="50" r="20" />' +
+            '</svg>' +
+            '<svg class="rotater" viewBox="0 0 100 100">' +
+            '<circle stroke="#009eff" stroke-width="4" fill="none" stroke-linecap="round" stroke-dasharray="89, 200" stroke-dashoffset="0" cx="50" cy="50" r="20" />' +
+            '</svg>'

Shouldn't we reference this svg file rather than inlining it? Then it will be more easily used elsewhere if needed.

Rerolled since the patch did not apply anymore to autocomplete.js. Hope this reroll is good (vs. binaries, etc).

@tkoleary We cannot apply CSS formatting on SVG image included as an image (with img tag) or as background image. With CSS we can control the size, color, etc. of SVG image parts if its placed as inline element.

Tested Gábor's re-roll against 8.4.x.

The throbber when testing in the tags auto complete widget, the throbber is displayed at full size and not resized to fit the widget.

@AaronChristian: yes please, I can help push this forward as much as possible but not do the actual making it work :)

Marking RTBC! Awesome implementation!

Tested Gábor patch #31 on Drupal 8.4.0-dev (latest pull). See screen capture attached.

Thanks everyone for your work on this.

No new patch was added between #34 and #37, so how did #34 get fixed?

Setting back to NR to confirm what the difference is. We can't commit this if it looks like #34 for some users, unfortunately. :)

Also, be sure to clear your browser caches. It might help to document the exact steps you use from e.g. "Install the Standard profile" to the screenshot to help figure out why we are getting different results.

When I tested the patch #37 I used a fresh 8.4.x-dev cloned from git.

I tested only on a single browser. Maybe we need to have this patch confirmed in another browser, in addition to Firefox.

Best thing is if we knew which browser + OS John Cook was using in #34, so we could double-check.

I've successfully tested the SVG and the fallback GIF (by manually editing classes as per instructions in #9), against the latest commit to 8.4.x, on:

- Opera 43.0.2442.806
- Firefox 51.0.1
- Chrome 56.0.2924.87
- Chrome Canary 58.0.3010.0
- Safari 10.0.3 (11602.4.8.0.1)

all of those Mac OS X El Capitan 10.11.6 desktop non-retina.

Looks very nice. Can someone check it's OK on some mobile devices?

@wrturrel Based on your tests, you should put this issue back to RTBC. :-)

By the way, I tested this on Retina Mac Firefox 52.0b5.

Just tested this aswell and working fine. Retina Mac Firefox 51.0.1

I've just re-tested Gábor's patch and it's working now.

Please disregard comment #34, I'm putting it down to "Tester Error".

Also, because of the extensive testing since then, I'm marking as RTBC.

Sorry everyone - I'm an idiot. :)

P.S. Here it is working.

We need to make sure that the new throbber is compatible with what's been done on #2793207: Fix off-set and goofy white jagged background of AJAX throbber when clicking Place Block - can some post a screenshot of the new throbber on the blue bartik header?

8.4.x on simply test me with place block enabled. With and without this patch:

@serg2 thanks! So the screenshots prove this needs work.

Sorry for the lack of a proper patch:

core/modules/block_place/css/block-place.css

 .block-place-region .ajax-progress-throbber .throbber {
   display: block;
   padding: 0;
   height: 26px;
   width: 26px;
-  background-position: center 6px;
+ background-position: center center;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 100px;
   box-sizing: border-box;

@serg2 Can you reroll the patch? :)

That should be it (but first core patch so please check!)

A screenshot in chrome for #50 patch. Marking as Needs Review.

Is there a way to stop it immediately disappearing, for testing purposes? (Seems to look ok.)

@wrurrell, have a look at comment #9. It suggests setting "autocomplete-loading" as a class on the container element.

serg2: I played around with this a bit and here are some thoughts:

1. +++ b/core/assets/vendor/modernizr/modernizr.min.js
   @@ -1,3 +1,3 @@
   \ No newline at end of file
   
   +++ b/core/misc/autocomplete.js
   @@ -218,8 +231,28 @@
   +            '<circle stroke="#d9d9d9" stroke-width="4" fill="none" stroke-linecap="round" stroke-dashoffset="0" cx="50" cy="50" r="20" />' +
   

   The stroke width is too narrow here for instances where the input is smaller like the autocomplete. I'd push it up to at least 10.

2. +++ b/core/misc/autocomplete.js
   @@ -218,8 +231,28 @@
   +            '<circle stroke="#009eff" stroke-width="4" fill="none" stroke-linecap="round" stroke-dasharray="89, 200" stroke-dashoffset="0" cx="50" cy="50" r="20" />' +
   

   Same applies here.

3. +++ b/core/themes/stable/css/system/components/ajax-progress.module.css
   @@ -5,15 +5,16 @@
   +  background: url(../../../images/core/throbber-active.gif) transparent center center no-repeat;
   

   If I understand correctly Moernizr gives us inline SVG, but for the fallback we can still have an SVG referenced as a file, which covers all browsers and retina displays.

4. +++ b/core/themes/stable/css/system/components/ajax-progress.module.css
   @@ -28,22 +29,22 @@ tr .ajax-progress-throbber .throbber {
      z-index: 1000;
   

   Whoa, 1000? That's going to put it above everything else that has a z-index. Is that what we want?

5. +++ b/core/themes/stable/css/system/components/ajax-progress.module.css
   @@ -28,22 +29,22 @@ tr .ajax-progress-throbber .throbber {
   +  background: transparent url(../../../images/core/throbber-active.gif) center center no-repeat;
   

   Same comment as above.

6. +++ b/core/themes/stable/css/system/components/autocomplete-loading.module.css
   @@ -5,18 +5,193 @@
   +  animation-duration: 1.8s;
   +  -webkit-animation-duration: 1.8s;
   +  -moz-animation-duration: 1.8s;
   

   This went by so fast I didnt even see it.

7. +++ b/core/themes/stable/css/system/components/autocomplete-loading.module.css
   @@ -5,18 +5,193 @@
   +  animation: dash 1.7s ease-in-out infinite 0s, spinner-color 6s ease-in-out infinite -0.75s;
   +  -webkit-animation: dash 1.7s ease-in-out infinite 0s, spinner-color 6s ease-in-out infinite -0.75s;
   +  -moz-animation: dash 1.7s ease-in-out infinite 0s, spinner-color 6s ease-in-out infinite -0.75s;
   

   I changed this to just ease-out in the browser and it worked better. The slow expansion of the dash means it's gone before it has a chance to appear.

re #54 I have made the changes suggested for points 1,2,4,6,7.

1. Done
2. Done
3. Use SVG file rather than GIF. Not done yet
4. Doing a quick scan of different z-indexes on the same pages the throbber is present I found values of 500-1250 so left it as 1000.
5. Use SVG file rather than GIF. Not done yet
6. Increase from 1.8s to 2.6s. The dash animation may need to be changed to fit in with this. Will visually test against this patch
7. Done

This will need visual browser testing & screenshots again.

@Serg

Looks much better. Visually tested in Chrome/Mac/Sierra.

I did a screen capture at 15 fps then dumped the frames into a animated gif. This is a bit slower than the original. I figure there should be ~67ms between frames. This gif is with 100ms between frames.

@frederickjh: is that with the patch applied?

It should appear as:

@tkoleary: I am not sure about the increase in line thickness made in #55. This moves us too far away from the style guide. The patch was RTBC back at #43 and my intention was just to re-roll after #2793207: Fix off-set and goofy white jagged background of AJAX throbber when clicking Place Block had been committed.

I will upload a new patch just with the essential changes and some screenshots which can hopefully then be committed, with other changes as follow ups.

@serg2 Yes that is with 2775725-55.patch applied on 8.4.x. It did however complain about whitespace.

$ curl https://www.drupal.org/files/issues/2775725-55.patch | git apply -v 
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  109k  100  109k    0     0   350k      0 --:--:-- --:--:-- --:--:--  440k
<stdin>:415: trailing whitespace.
2�����ެ�����B�D�ls�:&���:�,?-�����X}5	Zw-B�^s-6�8�@v�k��U��v�m�=7�q����v/�s�X�}B�
                                                                                   {L��A����>�ލN���R�sݕ�M3�$0.��L�Vx�à�my˯F��Ȝgn6ۧw�xΥ�%�P#>0�~<;�=�����>��x�nu�D�/����k�0��J/��9k?=��[_,��z��p����4��ضN쟊j�����@���i����A��>�堀��h.!H�*�w���������
<stdin>:612: trailing whitespace.
w�w?����7@9�wy�-@`�z�ܠ��
                            ؠ
<stdin>:711: trailing whitespace.
�+���ѹu'
        E�/�䐔-�0�U�BēP
<stdin>:848: trailing whitespace.
��ǔ�3�RV��v;������&e�Q^��P`��>)��Hw@�<�v���-���+!���cI��?�
                                                                 "��Kɧ���1��u0����,L��?���SI6Z�#@�� ܡ�ZC)L���A	
<stdin>:883: trailing whitespace.
z�ޝ���˻�����ӈ��|���C E��
Checking patch core/assets/vendor/modernizr/modernizr.min.js...
Checking patch core/misc/autocomplete.js...
Checking patch core/modules/block_place/css/block-place.css...
Checking patch core/themes/seven/css/components/form.css...
Checking patch core/themes/stable/css/system/components/ajax-progress.module.css...
Checking patch core/themes/stable/css/system/components/autocomplete-loading.module.css...
Checking patch core/themes/stable/images/core/throbber-active.gif...
Checking patch core/themes/stable/images/core/throbber-inactive.png...
Applied patch core/assets/vendor/modernizr/modernizr.min.js cleanly.
Applied patch core/misc/autocomplete.js cleanly.
Applied patch core/modules/block_place/css/block-place.css cleanly.
Applied patch core/themes/seven/css/components/form.css cleanly.
Applied patch core/themes/stable/css/system/components/ajax-progress.module.css cleanly.
Applied patch core/themes/stable/css/system/components/autocomplete-loading.module.css cleanly.
Applied patch core/themes/stable/images/core/throbber-active.gif cleanly.
Applied patch core/themes/stable/images/core/throbber-inactive.png cleanly.
warning: squelched 2 whitespace errors
warning: 7 lines add whitespace errors.

But, I am not sure that should change anything.

Regarding the thickness, It could be that I had the screen zoomed in when I did the screen capture. I am on Ubuntu 14.04 with high dpi screen. There are some issues there so I many times have to zoom in so things are the normal size. The zoom goes in steps and so it may not be the exact same size as it would be on other screens.

Here is a minimal re-roll from #31. The only additional changes are the animation adjustments suggested by tkoleary in #54.

Browser testing and screenshots to follow

I tested in multiple browsers and it works fine, as before.

Here is a screenshot from Chrome:

@frederickjh I am sure that must have been a browser cache issue. Would you mind clearing caches etc and then checking?

@serg2 I would try clearing the caches but I have already removed that development environment. Sorry it did not come out correctly. I thought I had run drush cr before recording the screencast.

@frederickjh: You can test Drupal 8.4.x together with the patch at simplytest.me:
https://simplytest.me/project/drupal/8.4.x?patch[]=https://www.drupal.or...
To make the throbber run continuously, use the "autocomplete-loading"-tip in #9.

The patch seems to work fine (Ubuntu 16.04 64-bit, Firefox 51.0.1):

@ressa: you can mark RTBC. Thanks for the tip with Simplytest.me.

I used Simplytest.me and tested the following browsers successfully.

• Firefox 52.0b7 macOS
• Safari 10.0.3 macOS
• Chrome 58.0.3013.3 dev macOS

I like the stroke width and the speed and animation.

I suggest to commit this and later on deal with the fallback icon.

Added basic testing instructions to Issue Summary (for taxonomy terms and inline block-placement).
Still unsure if there's a way to continuously activate the animation for the latter (I used classes in #9 when doing previous tests.)

+++ b/core/misc/autocomplete.js
@@ -218,8 +231,28 @@
+      if(Modernizr.svg) {
+        spinner.append(
+            '<svg viewBox="0 0 100 100">' +
+            '<circle stroke="#d9d9d9" stroke-width="4" fill="none" stroke-linecap="round" stroke-dashoffset="0" cx="50" cy="50" r="20" />' +
+            '</svg>' +
+            '<svg class="rotater" viewBox="0 0 100 100">' +
+            '<circle stroke="#009eff" stroke-width="4" fill="none" stroke-linecap="round" stroke-dasharray="89, 200" stroke-dashoffset="0" cx="50" cy="50" r="20" />' +
+            '</svg>'
+        );
+      } else {
+        spinner.append('<div class="fallback">&nbsp;</div>');
+      }

I don't want to stop progress on this vast improvement, but an inline SVG buried inside javascript with no template seems really hard for a front-end dev to override. Possibly even more difficult than what we currently have. Is there a javascript variable or template system we could leverage here to facilitate an override? Is there an argument for not using an external SVG file added added as a background image via css?

@jwilson3

It's true that we could use pure css like: http://codepen.io/filipekiss/pen/yJxFo

But i'm not convinced that this complex css is any better as a developer experience than the relatively simple variables that the svg provides.

re #69: +1 to your suggestion. We had to replace the circle icon with a goofy running dog on a client site. It meant we had to implement our own ajax callback and the work to swap out the simple icon was pretty extensive, for what seemed like a fairly simple theme thing.

We need to get someone to check this in Windows browsers before we RTBC, imho. Note you only need to do IE11 / Edge, as when 8.3.0 comes out the current plan is to formally drop support for IE9 and 10.

@jwilson3 see comments in #29 and #33 as to why inline SVG was choosen.

I have Windows with IE9 and IE10, but if we drop support with 8.3.0, I will not test on Windows as I do not have Windows 10.

I just tried it on Browserstack and it looks fine, but probably best to also have a genuine Windows machine test it:
os=Windows, os_version=8.1, browser=IE, browser_version=11.0

@xmacinfo Yes that's true but we were talking about referencing the svg rather than putting it in the code there. We have not as yet looked at a pure css (no image file) solution like the example in the link in #70.

Presumably the advantage there is both simpler dev experience and no need for fallback or polyfill for other browsers like IE.

@tkoleary Agreed. CSS would be great. But if we want to implement the throbber in CSS we may have to change this issue to “Needs work”. We would also need to know more precisely which browsers support that type of CSS animated icons.

I agree with @tkoleary at #70 & #75, I don't think that pure CSS will give us a better experience, and it's a lot of code to build a simple animation. I would rather go as well with a SVG.

I would also go for inline SVG like developed here (current patch).

CSS icon is not a a good option.

All other icons in Drupal 8 are now using SVG. We should stay inline with the other icons and use, accordingly, SVG for the throbber.

IMHO, no, this is not RTBC. My point about it being too difficult to override an inline SVG buried inside autocomplete.js was echoed by @heddn and has not been addressed. We had a JS template system in Drupal 7; I don't know if this has gone away in d8, but if it has not, this is a prime candidate to use it. Even if there is no proper "template system" per-se we should at the very least expose the SVG in a variable that can be overridden easily by a themer without temptation (for newbies) to hack or replace and override the entire autocomplete.js file.

Additionally, abstracting the inline svg into a separate template opens it up for easily droping it into other usages as well.

Edit:

One more point. The current patch modifies a core js file, which has nothing to do specifically with the Seven theme because it will affect all themes, so 1) the scope of the original issue has changed and the issue summary and title needs updating and 2) to drive home the importance of my previous point above, with the current patch as is, there wouldn't actually be a way to cleanly "override" the throbber for any single core theme, without introducing duplicate code.

Shall we try to move this along by making a small plan:

1) Design of throbber is done - Great

2) There is no longer a need for the fall back gif, we can simplify the patch by removing it and modernizer. We will be only be supporting IE11 and up soon - Agreed?

3) The throbber is added by Stable which can be overridden is a subtheme but cannot be directly edited - Override in Seven?

4) It must be easier for themers to override the SVG - How?

The best solution to (4) is to put the SVGs directly into twig templates (directly as DOM). This method provides the most options such as changing the color of the svg from a module [#23506) or in simply CSS. I have not seen this in core but have tested it and it works.

Following on from #82 I thought it best to ask if the following would be a good for developer experience:

this is the existing core/themes/classy/templates/form/input.html.twig
<input{{ attributes }} />{{ children }}

and with the SVGs added along with required mark up would be:

<div style="position: relative; width: 50%;">
<svg class="static-circle" viewBox="0 0 100 100"
 style="position: absolute; right:0; top:0; height:100%;">
<circle stroke="#d9d9d9" stroke-width="4" fill="none" stroke-linecap="round" stroke-dashoffset="0" cx="50" cy="50" r="20"></circle></svg>
<svg class="rotater" viewBox="0 0 100 100"
 style="position: absolute; right:0; top:0; height:100%;">
<circle stroke="#009eff" stroke-width="4" fill="none" stroke-linecap="round" stroke-dasharray="89, 200" stroke-dashoffset="0" cx="50" cy="50" r="20"></circle></svg>
<input{{ attributes }} />{{ children }}

The CSS (style) would be put into theme CSS and each of the SVGs given classes which could make them easily target by themers.

Please excuse the rough code, the purpose here is to try to move the issue along with alternatives to existing approach.

As mentionned in https://www.drupal.org/node/2775725#comment-11991807 :

All other icons in Drupal 8 are now using SVG. We should stay inline with the other icons and use, accordingly, SVG for the throbber.

That way, we offer an uniform experience. Furthermore, CSS icons are more hacks and should be avoided.

@xmacinfo: what do you mean? the patch uses SVG :)

what do you mean? the patch uses SVG :)

Yes, this is the point, this patch is using SVG and should be committed as is, unless we see some implementation bugs.

What I mean is that that we must should stop thinking that a better solutions would be to use CSS-icons (or pure CSS) as mentioned in https://www.drupal.org/node/2775725#comment-11948957. That type of CSS icons (pure CSS icons) are hacks and should be avoided.

I've had an idea for point 4 of serg2's comment #82, although I don't know if it's a good idea.

The is the option for libraries-override in the theme's yml. How about having a magic™ library that handles the throbber with a path to the image to be used relative to the theme directory.
eg:

libraries-override:
  system/throbber:
    img: path/to/image.svg

Although, this would mean having Drupal understand what the img parameter means. And it is, of course, something for another issue.

It would be nice to get some other peoples thoughts.

+1 for your Idea @john-cook #89. Because if you want to overwrite the styling of the throbber in your Theme, 99% of the time you want it to be consistent over all the elements. Also this way it's very easy to change for a frontend dev. That's why I think it's a much better approach than putting SVG inside the templates or inline to the JS.

• With the JS approach it's hard to overwrite for frontend devs that don't know about the inner workings of drupal.
• With the template approach it's hard for a frontend dev to get it consistent over all pages / views / fields a.s.o. because there are many elements using the throb>ber which means many templates to overwrite in your custom theme.
• With CSS-Icons you could overwrite it, but I agree that it feels hacky, although it's used widespread over the frontend community.

Sadly I don't know the implications for core to use this approach, but I would welcome it.

Rerolled the patch against 8.6.x.

The current approach overrides the throbber icon everywhere. We should limit the scope of this issue only to Seven. I'm personally happy with the current approach for creating the animation.

@vaplas thanks for the feedback!

Tagging issue which would make theming throbber easier which might help this issue.

Nice find @vaplasm. I can't validate if the problem you discovered is solved, but the patch seems to apply fine. I do get a few warnings about trailing whitespace:

<stdin>:465: trailing whitespace.
2�����ެ�����B�D�ls�:&���:�,?-�����X}5  Zw-B�^s-6�8�@v�k����U��v�m�=7�q����v/�s�X�}B�
                                                                                     {L��A����>�ލN���R�sݕ�M3�$0.��L�Vx�à�my˯F��Ȝgn6ۧw�xΥ�%�P#>0�~<;�=�����>��x�nu�D�/����k�0��J/��9k?=��[_,��z��p����4����ضN쟊j�����@���i����A��>�堀��h.!H�*�w���������
<stdin>:662: trailing whitespace.
w�w?����7@9�wy�-@`�z�ܠ��
                          ؠ
<stdin>:761: trailing whitespace.
�+���ѹu'
        E�/�䐔-�0�U�BēP
<stdin>:898: trailing whitespace.
��ǔ�3�RV��v;������&e�Q^��P`��>)��Hw@�<�v���-���+!����cI��?�
                                                                  "��Kɧ���1��u0����,L��?���SI6Z�#@�� ܡ�ZC)L���A 
<stdin>:933: trailing whitespace.
z�ޝ���˻��^����ӈ��|�����C E���
warning: squelched 3 whitespace errors
warning: 8 lines add whitespace errors.

PS. I used the work-in-progress in #2911319: Provide a single command to install & run Drupal to quickly apply the patch like this:

Quick install Drupal 8 and apply patch

curl -sS https://ftp-origin.drupal.org/files/projects/drupal-8.6.x-dev.zip --output drupal-8.6.x-dev.zip
unzip drupal-8.6.x-dev.zip && rm drupal-8.6.x-dev.zip
cd drupal-8.6.x-dev
wget -q -O - https://www.drupal.org/files/issues/2018-04-24/2911319-2-296.patch | git apply -
wget -q -O - https://www.drupal.org/files/issues/2018-04-24/2775725-97.patch | git apply -
php core/scripts/drupal quick-start demo_umami

EDIT: Updated to use latest patch from single command install, and also install Umami demo for sample content.

@ressa that is fine, it is caused by non code files in the patch.

Moving back to NW to work making this Seven specific as mentioned on #93.

Thanks @lauriii, that makes sense. Do you know how the animation can be activated to test the problem pointed out in #95? (I used the technique in #9 when doing previous tests.)

@ressa I used a chrome network profile with a very long latency for testing that. The problem can be seen for example when you change field widget.

Thanks @lauriii, that technique is more efficient and also works for fx taxonomy fields. For others, here's how to create a Chrome network profile with long latency:

How to keep the throbber icon running in Chromium or Chrome

Right-click on the page and click Inspect. Select Network > Online > Add > Add custom profile, call it fx "Very slow", enter fx 2000 in the Latency field and click Add. Now you can select the Very slow option under Network and watch the page load quite slowly when you change field widget or enter a taxonomy term, giving you more time to observe the throbber icon.

To quickly create a Drupal 8 installation with test content and also apply a patch, you can use the commands under "Quick install Drupal 8 and apply patch" in #99.

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.

consolidating issues under the JavaScript tag

The Seven theme has been removed from Drupal 10 core. However, this issue affects more than just the Seven theme - the throbber is used core's default CSS - so moving this to the CSS component for further discussion.

There was already an issue that was marked postponed on this one which IMO should be reactivated now that this one is no longer a blocker.

It probably makes sense to have core maintainer (@laurii?) pull over issue credits from here to that issue, too.

#1974928: Update Drupal's default throbber icons

Putting this into RTBC for maintainer visibility.

Edit. moved comment to other issue.

a 6 years old patch can't really be RTBC :) Please go through it, make sure it's still the right design, and put that in a MR

It would help a lot for someone to go through the related issue and post the credits in a comment. I'll update the issue credit here

Believe this belongs in the seven theme now.

It would help a lot for someone to go through the related issue and post the credits in a comment. I'll update the issue credit here

The idea is to copy credit from everyone who worked on this issue into the older original one that is still open in Drupal core's issue queue: #1974928: Update Drupal's default throbber icons

Please go through it, make sure it's still the right design, and put that in a MR.

I've already done this on the other issue which now has an MR.

The design changes proposed here would be something that remains scoped to the Seven theme only. I'm not certain that makes any sense to be evolving now that Seven theme is removed from core. Assuming maintainers of Seven think this has any chance of getting in, and still want this in an MR, then it may be easiest to just copy over the MR approach from that core issue here for Seven. It could use one of the two SVGs proposed on that issue (see the codepen in that issue's summary for reference).

I'm leaving this in NW to:

• get Seven theme maintainer feedback on issue validity so community can continue to work on this issue
• get consensus here on whether to A) evolve the SVG design along the lines of the previous comments on this issue, or B) inherit the throbbers from core, or C) to pull over one of the two proposed updated SVGs from the core issue here so this issue is not tied to whatever core decides.
• convert this issue into an MR
• review all contributors on this issue and make a list of them on #1974928: Update Drupal's default throbber icons so core maintainer can add credit there

thanks for the work on the other issue. I didn't realize this one was related to seven

Modenizr has been deprecated in Drupal core (#3239980: Deprecate Modernizr); any usage has been removed from Drupal core (#3281559: Remove modernizr usages from core).

We should not rely on that library.

I suggest starting over with a clean MR that just pulls in the SVG throbber that ended up getting committed to Core in #1974928: Update Drupal's default throbber icons using the same approach from that issue for the Seven theme. No modernizer needed.

Was about to pick this up, but neither throbber-active.gif nor throbber-inactive.png from core have been copied into the seven theme, meaning it inherits whatever core has already.

The only icon I see in the seven theme codebase is https://git.drupalcode.org/project/seven/-/blob/2.0.x/images/loading-sma... referenced only by jQuery UI Dialog.

https://git.drupalcode.org/project/seven/-/blob/2.0.x/css/components/dia...

The loading-small.gif is out of scope of this issue, therefore, I suggest closing this one and opening a follow-up issue to pull down the animated loading-small.svg for core in #2575253: Update loading icon and use SVG.

I would like to get a new throbber in Seven, but as SVG image like Drupal core does.

Why not just inherit the one from Drupal core?

I feel, like aaronchristian and others who worked on this issue, that the proposed throbber fits better the theme styles.

This issue is not just about replacing the throbber with a SVG image, but also giving a new one to the Seven theme.

I am closing this issue since, despite the issue summary, its patches update the Drupal core throbber, not only the Seven theme's one.

As there has not been progress in about six years, I am now inclined to use the default Drupal throbber.

Amending attribution.