Add generic anim-rotate-360 class for use by view_components/spinner.

[theojulienne]

The current implementation of SpinnerComponent in primer/view_components uses an SVG with SMIL animations to render a spinner that spins indefinitely. This unfortunately triggers a bug in Chrome that is very frustrating for users, where a page with SVGs with infinitely-repeating SMIL animations that is placed in the background will trigger a linear task to emit, then run, events for each frame that would have been run, as soon as the page is returned to the foreground. This execution is linear to the number of SVGs with repeating SMIL animations multiplied by the duration the tab is in the background. For GitHub.com webpages, this can take seconds, or even minutes, where the Chrome tab is frozen, or even locking up the entire OS if memory is limited.

This PR is the first of 2 parts, it implements a simple CSS class that rotates an element 360 degrees repeatedly. It is not possible to directly include this inside the SpinnerComponent itself because CSS keyframes seem to need to be included in a full CSS file and not inline styles, and since this was a very simple/generic animation that could easily be reused, it seemed nicest to include this here as a generic anim-rotate-360 class.

The following change becomes possible with this in the CSS, with both being identical, except that the second uses CSS animations which do not trigger this bug:

-  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke">
-    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="1s" repeatCount="indefinite" />
-  </path>
+  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" class="anim-rotate-360" style="transform-origin: 8px 8px;" />

/cc @primer/ds-core
/cc primer/view_components#398 which uses this new class

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-css/mPHsvkXS5vQA7Uk5GwyoZwHFNrkK
✅ Preview: https://primer-css-git-fork-theojulienne-fix-spinner-browser-lag-primer.vercel.app

[simurai]

There is currently .anim-rotate on dotcom that could be used. But it would still be great to move it to Primer CSS. Some considerations:

• We could keep the .anim-rotate so that we don't need to rename it on dotcom.
• Would be great to add the new class to the docs.

[theojulienne]

We could keep the .anim-rotate so that we don't need to rename it on dotcom.

👍 I don't think the 360 added anything.

Would be great to add the new class to the docs.

👍 Added with a rotating mark-github octicon.

[simurai]

🙇 Thanks for the updates. Ok, let's get it into 16.0.0 #1241.