diff --git a/src/tools/mixins/_transitions.scss b/src/tools/mixins/_transitions.scss
index 5a9e85b0..802de52a 100644
--- a/src/tools/mixins/_transitions.scss
+++ b/src/tools/mixins/_transitions.scss
@@ -2,7 +2,6 @@
 // Transition Mixin
 //
 
-
 // Placeholder for prefers-reduced-motion query
 %prefers-reduced-motion {
   @media (prefers-reduced-motion: reduce) {
@@ -65,6 +64,7 @@
   $imported-pulse: false !default;
   $imported-flash: false !default;
   $imported-spin: false !default;
+  $imported-loading-spinner: false !default;
 
   @if $name == pulse and not $imported-pulse {
     $imported-pulse: true;
@@ -92,6 +92,23 @@
         opacity: 0;
       }
     }
+  } @else if $name == loading-spinner and not $imported-loading-spinner {
+    $imported-loading-spinner: true;
+    @keyframes loading-spinner {
+      from,
+      to {
+        transform: rotate(-360deg);
+        border-radius: 50%;
+      }
+      50% {
+        transform: rotate(0deg);
+        border-radius: 0;
+      }
+      to {
+        transform: rotate(360deg);
+        border-radius: 50%;
+      }
+    }
   } @else if $name == spin and not $imported-spin {
     $imported-spin: true;
     @keyframes spin {
diff --git a/src/tools/mixins/shapes/_animated.scss b/src/tools/mixins/shapes/_animated.scss
index e53d3300..d2cc78c6 100644
--- a/src/tools/mixins/shapes/_animated.scss
+++ b/src/tools/mixins/shapes/_animated.scss
@@ -15,12 +15,10 @@
     width: 1em;
     height: 1em;
     border: .15em solid currentColor;
-    border-right-color: transparent;
-    border-radius: $border-radius-pill;
     // avoid using @mixin animation to generate radius independent of `$enable-transitions` option
-    animation: spin 1s infinite linear;
+    animation: loading-spinner 2s infinite cubic-bezier(.65, 0, .35, 1);
     color: $color;
-    @include include-keyframe(spin);
+    @include include-keyframe(loading-spinner);
   }
 }