Evaluate SVG animation to replace the throbber and use consistently in core

[indigoxela]

Description of the bug

We have SVG icons in core! 🎉
But wait, there's this ugly little throbber, inherited from old Drupal, last time adapted back in 2015, but still in "Drupal blue" and sort of 90-s style.

https://github.com/backdrop/backdrop/blob/1.x/core/misc/throbber-active.gif

And there's yet another throbber - the one that views uses when opening views field dialogs. Different colors, different style.

https://github.com/backdrop/backdrop/blob/1.x/core/misc/loading-small.gif

Now that we dropped IE support, and browser support for animated SVG is pretty good, we could consider switching to animated SVG.

Advantage: better scaling, true transparency support, so it can look good on any background-color, in any size.

Disadvantage: to be determined

First step: define requirements

• Browser support
• Should be clear enough to be self-explaining
• Not too distracting (A11Y)
• Should be decent enough to fit any theme (no branding or color assumptions)
• Should be easy to override in themes, if they need to
• Should still play nicely with default themes (shouldn't look like a foreign object from the 90s)
• ??? what's missing?

[indigoxela]

@klonos already collected the usual Drupal links for that, in case someone's interested:

• https://www.drupal.org/docs/develop/theming-drupal/update-the-throbber
• https://www.drupal.org/project/drupal/issues/2775725
• https://www.drupal.org/project/drupal/issues/2575253
• https://www.drupal.org/project/drupal/issues/1974928

Slightly related, but actually about a JS detail: #6441

[herbdool]

One of the Drupal links differentiates between the throbber and loader icon. Is that true? Do we need to replace both?

[herbdool]

This might be a good starting point https://gist.github.com/joelpittet/c75ff7c2f86282ff9499

[indigoxela]

One of the Drupal links differentiates between the throbber and loader icon. Is that true? Do we need to replace both?

AFAIK, we're in no way bound to Drupal decisions. 😜

Note: as this is almost exclusively a design topic, I won't provide a PR. For sure not, if there's nothing decided, yet.
In case, someone here wants an animated SVG, ping me, though.

[klonos]

Relevant to a11y:

• https://stackoverflow.com/questions/38704467/how-to-label-a-loading-animation-for-wai-aria
• https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements
• https://codeburst.io/how-to-create-a-simple-css-loading-spinner-make-it-accessible-e5c83c2e464c

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript: https://getbootstrap.com/docs/4.2/components/spinners