Change spin animation name

CHANGELOG.txt

@@ -7,6 +7,7 @@ Changelog
  * Added Aging Pages report (Tidjani Dia)
  * Add more SketchFab oEmbed patterns for models (Tom Usher)
  * Fix: Accessibility fixes for Windows high contrast mode; Dashboard icons colour and contrast (Sakshi Uppoor)
+ * Fix: Rename additional 'spin' CSS animations to avoid clashes with other libraries (Kevin Gutiérrez)
 
 
 2.15.1 (11.11.2021)

client/scss/components/_loading-mask.scss

@@ -27,7 +27,7 @@
             top: 50%;
             margin: -15px 0 0 -15px;
             font-family: wagtail;
-            animation: spin 0.5s infinite linear;
+            animation: spin-wag 0.5s infinite linear;
             content: map-get($icons, 'spinner');
             z-index: 2;
             color: $color-teal;

client/src/components/LoadingSpinner/LoadingSpinner.scss

@@ -3,5 +3,5 @@
     display: inline-block;
     width: 1em;
     height: 1em;
-    animation: spin 0.5s infinite linear;
+    animation: spin-wag 0.5s infinite linear;
 }

docs/releases/2.16.md

@@ -18,6 +18,7 @@
 ### Bug fixes
 
  * Accessibility fixes for Windows high contrast mode; Dashboard icons colour and contrast (Sakshi Uppoor)
+ * Rename additional 'spin' CSS animations to avoid clashes with other libraries (Kevin Gutiérrez)
 
 
 ## Upgrade considerations

wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

@@ -788,12 +788,12 @@
 
           <style>
             .spinning {
-              animation-name: spin;
+              animation-name: spin-wag;
               animation-duration: 500ms;
               animation-iteration-count: infinite;
               animation-timing-function: linear;
             }
-            @keyframes spin {
+            @keyframes spin-wag {
                 from {
                     transform: translateY(0.6em) rotate(0deg);
                 } to {