Update loading icon and use SVG

I'm not sure about the change from white on black to blue on white.

I think it would be good to get a quick screenshot of how some of these are used on the page in context.

Of the demos you created, the best one is the first one. The radial effect is probably a winner, however there are too few "slices" of the different levels of transparency that make the radial gradient look blotchy. So, I made a first attempt at an improved codepen that uses a more "fluid" radial effect to avoid the jagged edges.

http://codepen.io/jameswilson/full/xwRXZy/

But while working on it, it became clear that this is not a realistic way to build the spinner because it depends on a second SVG with a radial gradient overlay that is then spun around, so when you change the background color behind the gradient to anything other than white, the effect looks extremely poor.

On white

On gray

For the more complex objects (like the druplicon or the star) we'll need to rewrite these using SVG masks. For the least complex radial one, I was able to refactor it to just a single rotating SVG, which resolves the issue of different background colors:

http://codepen.io/jameswilson/pen/BoQJVB

They are different icons, used in different places as far as I can tell. one is "throbber" the other one is "loading" and they are used for different purposes, which (i presume) is why they have different designs already in core. Agreed that the design is all over the place here. Why group two unrelated animated icons into one issue?

Could we scope this issue to leave the design of loading.gif alone and *just* convert the icon "as-is" to a CSS-animated SVG?

Here is a prototype using pure CSS animations:

http://codepen.io/jameswilson/pen/WwqyjK

@tameeshb, i think this is free to be worked on but be advised that other people are looking at this through the seven theme's design direction, so you might want to coordinate efforts with others that are involved there first before spinning wheels on design work as has been done in some of the previous comments on this thread.

Please see: #2775725: Update the throbber icon

I setup a codepen to review the before (GIF) and after (SVG) from the MR.

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

Things are really close and this is exciting!

I found a few minor but important things to consider:

1. The dots are slightly smaller in the SVG than in the GIF. The dots in the GIF are really too close to each other and to the edges of the image, making it look a little amaturish. This is really a good enhancement, IMO.
2. The SVG duration is currently 1.0 seconds, but the GIF duration is 0.8 seconds (verified by uploading the current loading-small.gif to ezgif.com (here). One second appears slower and more lethargic, which is not what you want to portray when displaying a loader. There needs to be a slight sense of urgency that 0.8 seconds provides, versus 1 second.
3. The GIF size is 24 x 24 pixels, the SVG is 25 x 25. I suggest we maintain the same dimensions by default if possible. Front end developers can always resize it with CSS in their theme and since it's a vector it will still look good!
4. Issue needs summary update with final approach.
5. Hide all the old patches, attachments, and approaches.

I've pushed fixes for the two items, and created a new codepen for comparison:

0.8s at 24px

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

Compare against previous pen with 1s at 25px

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

Solves #54.2 and #54.3

Restore issue summary lost by comment #43.

Clean up issue summary.

Solves #54.4

Hide file attachments from previous approaches in the issue summary.

Solves #54.5

Remaining tasks:

• Needs replacement for loading.gif => loading.svg (with roughly the same SVG used for loading-small.svg, only with different dimensions.
• Needs testing on simplytest.me with a before/after screenshots of loading.svg and loading-small.svg, to ensure no visual regressions.

I found an instance of loading-small.gif in the starterkit_theme that can be removed:

./core/themes/starterkit_theme/images/icons/loading-small.gif

Additionally, the starterkit_theme refers to its own copy of loading-small.svg, which doesnt exist, and therefore needs to be copied from core/misc/ folder into the theme's images/icons/ folder.

I've fixed all relevant code points made in #54, #59, and #60. NR.

Since we're deleting the GIFs, we may want to consider adding an .htaccess rule to redirect the requests for the deleted GIF images to their respective SVG image counterparts. Thoughts?

I've created a comparison codepen for loading.gif => loading.svg

https://codepen.io/jameswilson/pen/OJYXqZE?

Rebased.

There are all kinds of seemingly unrelated test failures after the rebase. It seems the 11.x branch may be a bit unstable at the moment.

Nevermind. I found one real failure worth fixing related to the htaccess file changes not being present in the scaffold file. Fix on the way.

Yay. tests pass now

Forgive my ignorance, but isn't D11 the next major? There isn't even a 12.x branch yet.

I've restored core/misc/loading.gif and core/misc/loading-small.gif.

I did not restore the loading GIF in the starterkit theme, because by its very nature, it is not intended to be referenced, but instead forked/copied and manipulated. There's no need to ship starterkit with a file that will never be used.

And there is no mechanism for deprecating images so can only remove in a major (D12)

I get what you mean, and understand that the files can only be removed in a major upgrade, but I should clarify that the MR does include a mechanism for deprecating the old images which I think will work in the current D11 beta. Specifically:

• Make an addition to .htaccess to redirect requests to the old files to the new files.
• Ensure the new files are the exact same size and dimensions of the originals.
• Write a CR to explain that the files are deprecated in D11.0 (assuming this gets in soon) and that themes and modules should check for references to these files and update them accordingly for D12 and optionally D11.

For anyone following along here, I've opened another issue related to PNG to SVG conversion in core file icons: #3521857: Update Drupal's default file type icons to use SVG