[TASK] Streamline spinner web component size and animation

This change performs the following optimizations:

* Detach spinner from content flow using a relative+absolute
  position normalization, allowing an equivalent positioning
  to the regular backend icons.
  This is to ensure that both, <typo3-backend-spinner> and
  <typo3-backend-icon> render equally when used in inline(-block)
  containers (for example .svg-toolbar__drag-node).
  <typo3-backend-spinner> used to cause vertical alignment offsets,
  when the spinner was positioned in inline text-flow and therefore
  caused the vertical flow to cause offsets.

* Add a variant="light|dark" attribute to select
  between the available TYPO3 spinner variants.
  By default the current color is now used.

* Adapt sizing to inherit size from current font-size when used
  without a specific size attribute. Also apply that to the
  backend icon component to stay interchangeable.

* Render spinner via SVG and only animate the spinning part
  instead of the entire shape. This is to avoid the bouncing-icon
  effect that CSS animations on the entire element cause
  (as often seen with font-awesome spinners for example).

Releases: master
Resolves: #94149
Change-Id: I00d2e4915a0644726f78abe485fd9e276b539259
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/69162


Tested-by: Oliver Bartsch <bo@cedev.de>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: core-ci <typo3@b13.com>
Tested-by: Benjamin Franzke <bfr@qbus.de>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Benjamin Franzke <bfr@qbus.de>