diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index 9bd51c3100..a1a47f6f6d 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -1115,19 +1115,19 @@ exports[`Storyshots Components/Button/IconButton Base 1`] = `
 exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-.circuit-7 {
+.circuit-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1160,33 +1160,33 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
   overflow: hidden;
 }
 
-.circuit-7:focus {
+.circuit-6:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-7:focus::-moz-focus-inner {
+.circuit-6:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-7:disabled,
-.circuit-7[disabled] {
+.circuit-6:disabled,
+.circuit-6[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-7:hover {
+.circuit-6:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-7:active {
+.circuit-6:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 24px;
   width: 24px;
   position: absolute;
@@ -1206,22 +1206,20 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
 }
 
-.circuit-4 {
+.circuit-3 {
   display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
@@ -1233,20 +1231,17 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
 }
 
 <button
-  class="circuit-6 circuit-7"
+  class="circuit-5 circuit-6"
 >
   <div
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
   >
-    <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-0 circuit-1"
-      role="alert"
+    <span
+      class="circuit-0"
     />
   </div>
   <span
-    class="circuit-4 circuit-5"
+    class="circuit-3 circuit-4"
   >
     Things take time
   </span>
@@ -1256,19 +1251,19 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
 exports[`Storyshots Components/Button/LoadingButton Error 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-.circuit-7 {
+.circuit-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1301,33 +1296,33 @@ exports[`Storyshots Components/Button/LoadingButton Error 1`] = `
   overflow: hidden;
 }
 
-.circuit-7:focus {
+.circuit-6:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-7:focus::-moz-focus-inner {
+.circuit-6:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-7:disabled,
-.circuit-7[disabled] {
+.circuit-6:disabled,
+.circuit-6[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-7:hover {
+.circuit-6:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-7:active {
+.circuit-6:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 24px;
   width: 24px;
   position: absolute;
@@ -1347,22 +1342,20 @@ exports[`Storyshots Components/Button/LoadingButton Error 1`] = `
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
 }
 
-.circuit-4 {
+.circuit-3 {
   display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
@@ -1374,20 +1367,17 @@ exports[`Storyshots Components/Button/LoadingButton Error 1`] = `
 }
 
 <button
-  class="circuit-6 circuit-7"
+  class="circuit-5 circuit-6"
 >
   <div
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
   >
-    <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-0 circuit-1"
-      role="alert"
+    <span
+      class="circuit-0"
     />
   </div>
   <span
-    class="circuit-4 circuit-5"
+    class="circuit-3 circuit-4"
   >
     I will fail.
   </span>
@@ -1397,19 +1387,19 @@ exports[`Storyshots Components/Button/LoadingButton Error 1`] = `
 exports[`Storyshots Components/Button/LoadingButton Success 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-.circuit-7 {
+.circuit-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1442,33 +1432,33 @@ exports[`Storyshots Components/Button/LoadingButton Success 1`] = `
   overflow: hidden;
 }
 
-.circuit-7:focus {
+.circuit-6:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-7:focus::-moz-focus-inner {
+.circuit-6:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-7:disabled,
-.circuit-7[disabled] {
+.circuit-6:disabled,
+.circuit-6[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-7:hover {
+.circuit-6:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-7:active {
+.circuit-6:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 24px;
   width: 24px;
   position: absolute;
@@ -1488,22 +1478,20 @@ exports[`Storyshots Components/Button/LoadingButton Success 1`] = `
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
 }
 
-.circuit-4 {
+.circuit-3 {
   display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
@@ -1515,20 +1503,17 @@ exports[`Storyshots Components/Button/LoadingButton Success 1`] = `
 }
 
 <button
-  class="circuit-6 circuit-7"
+  class="circuit-5 circuit-6"
 >
   <div
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
   >
-    <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-0 circuit-1"
-      role="alert"
+    <span
+      class="circuit-0"
     />
   </div>
   <span
-    class="circuit-4 circuit-5"
+    class="circuit-3 circuit-4"
   >
     I am a success!
   </span>
@@ -10204,77 +10189,35 @@ exports[`Storyshots Components/Sidebar Base 1`] = `
 exports[`Storyshots Components/Spinner Base 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-.circuit-2 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background-color: #9DA7B1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 50px;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: 50px;
-}
-
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
-  opacity: 1;
 }
 
-<div
-  class="circuit-2 circuit-3"
->
-  <div
-    aria-busy="true"
-    aria-live="assertive"
-    class="circuit-0 circuit-1"
-    role="alert"
-  />
-</div>
+<span
+  class="circuit-0"
+/>
 `;
 
 exports[`Storyshots Components/Step Form 1`] = `
diff --git a/src/components/LoadingButton/__snapshots__/LoadingButton.spec.js.snap b/src/components/LoadingButton/__snapshots__/LoadingButton.spec.js.snap
index 3fb04eee53..e6e447f09c 100644
--- a/src/components/LoadingButton/__snapshots__/LoadingButton.spec.js.snap
+++ b/src/components/LoadingButton/__snapshots__/LoadingButton.spec.js.snap
@@ -3,19 +3,19 @@
 exports[`LoadingButton Style tests should render with default styles 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-.circuit-7 {
+.circuit-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -48,33 +48,33 @@ exports[`LoadingButton Style tests should render with default styles 1`] = `
   overflow: hidden;
 }
 
-.circuit-7:focus {
+.circuit-6:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-7:focus::-moz-focus-inner {
+.circuit-6:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-7:disabled,
-.circuit-7[disabled] {
+.circuit-6:disabled,
+.circuit-6[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-7:hover {
+.circuit-6:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-7:active {
+.circuit-6:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 24px;
   width: 24px;
   position: absolute;
@@ -94,22 +94,20 @@ exports[`LoadingButton Style tests should render with default styles 1`] = `
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
 }
 
-.circuit-4 {
+.circuit-3 {
   display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
@@ -121,20 +119,17 @@ exports[`LoadingButton Style tests should render with default styles 1`] = `
 }
 
 <button
-  class="circuit-6 circuit-7"
+  class="circuit-5 circuit-6"
 >
   <div
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
   >
-    <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-0 circuit-1"
-      role="alert"
+    <span
+      class="circuit-0"
     />
   </div>
   <span
-    class="circuit-4 circuit-5"
+    class="circuit-3 circuit-4"
   />
 </button>
 `;
@@ -142,33 +137,19 @@ exports[`LoadingButton Style tests should render with default styles 1`] = `
 exports[`LoadingButton Style tests should render with default styles after loading has finished 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-.circuit-7 {
+.circuit-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -201,33 +182,33 @@ exports[`LoadingButton Style tests should render with default styles after loadi
   overflow: hidden;
 }
 
-.circuit-7:focus {
+.circuit-6:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-7:focus::-moz-focus-inner {
+.circuit-6:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-7:disabled,
-.circuit-7[disabled] {
+.circuit-6:disabled,
+.circuit-6[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-7:hover {
+.circuit-6:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-7:active {
+.circuit-6:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 24px;
   width: 24px;
   position: absolute;
@@ -247,22 +228,20 @@ exports[`LoadingButton Style tests should render with default styles after loadi
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
 }
 
-.circuit-4 {
+.circuit-3 {
   display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
@@ -274,20 +253,17 @@ exports[`LoadingButton Style tests should render with default styles after loadi
 }
 
 <button
-  class="circuit-6 circuit-7"
+  class="circuit-5 circuit-6"
 >
   <div
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
   >
-    <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-0 circuit-1"
-      role="alert"
+    <span
+      class="circuit-0"
     />
   </div>
   <span
-    class="circuit-4 circuit-5"
+    class="circuit-3 circuit-4"
   />
 </button>
 `;
@@ -295,33 +271,19 @@ exports[`LoadingButton Style tests should render with default styles after loadi
 exports[`LoadingButton Style tests should render with loading styles 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-.circuit-7 {
+.circuit-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -354,33 +316,33 @@ exports[`LoadingButton Style tests should render with loading styles 1`] = `
   overflow: hidden;
 }
 
-.circuit-7:focus {
+.circuit-6:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-7:focus::-moz-focus-inner {
+.circuit-6:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-7:disabled,
-.circuit-7[disabled] {
+.circuit-6:disabled,
+.circuit-6[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-7:hover {
+.circuit-6:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-7:active {
+.circuit-6:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 24px;
   width: 24px;
   position: absolute;
@@ -400,23 +362,20 @@ exports[`LoadingButton Style tests should render with loading styles 1`] = `
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
-  opacity: 1;
 }
 
-.circuit-4 {
+.circuit-3 {
   display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
@@ -432,20 +391,17 @@ exports[`LoadingButton Style tests should render with loading styles 1`] = `
 }
 
 <button
-  class="circuit-6 circuit-7"
+  class="circuit-5 circuit-6"
 >
   <div
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
   >
-    <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-0 circuit-1"
-      role="alert"
+    <span
+      class="circuit-0"
     />
   </div>
   <span
-    class="circuit-4 circuit-5"
+    class="circuit-3 circuit-4"
   />
 </button>
 `;
diff --git a/src/components/LoadingButton/components/Button/__snapshots__/Button.spec.js.snap b/src/components/LoadingButton/components/Button/__snapshots__/Button.spec.js.snap
index 46d8a3ce96..83aae80b82 100644
--- a/src/components/LoadingButton/components/Button/__snapshots__/Button.spec.js.snap
+++ b/src/components/LoadingButton/components/Button/__snapshots__/Button.spec.js.snap
@@ -3,33 +3,19 @@
 exports[`Button Style tests should have active loading styles 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-.circuit-7 {
+.circuit-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -62,33 +48,33 @@ exports[`Button Style tests should have active loading styles 1`] = `
   overflow: hidden;
 }
 
-.circuit-7:focus {
+.circuit-6:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-7:focus::-moz-focus-inner {
+.circuit-6:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-7:disabled,
-.circuit-7[disabled] {
+.circuit-6:disabled,
+.circuit-6[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-7:hover {
+.circuit-6:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-7:active {
+.circuit-6:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 24px;
   width: 24px;
   position: absolute;
@@ -108,23 +94,20 @@ exports[`Button Style tests should have active loading styles 1`] = `
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
-  opacity: 1;
 }
 
-.circuit-4 {
+.circuit-3 {
   display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
@@ -140,20 +123,17 @@ exports[`Button Style tests should have active loading styles 1`] = `
 }
 
 <button
-  class="circuit-6 circuit-7"
+  class="circuit-5 circuit-6"
 >
   <div
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
   >
-    <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-0 circuit-1"
-      role="alert"
+    <span
+      class="circuit-0"
     />
   </div>
   <span
-    class="circuit-4 circuit-5"
+    class="circuit-3 circuit-4"
   />
 </button>
 `;
@@ -161,19 +141,19 @@ exports[`Button Style tests should have active loading styles 1`] = `
 exports[`Button Style tests should have default styles 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-.circuit-7 {
+.circuit-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -206,33 +186,33 @@ exports[`Button Style tests should have default styles 1`] = `
   overflow: hidden;
 }
 
-.circuit-7:focus {
+.circuit-6:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-7:focus::-moz-focus-inner {
+.circuit-6:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-7:disabled,
-.circuit-7[disabled] {
+.circuit-6:disabled,
+.circuit-6[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-7:hover {
+.circuit-6:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-7:active {
+.circuit-6:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 24px;
   width: 24px;
   position: absolute;
@@ -252,22 +232,20 @@ exports[`Button Style tests should have default styles 1`] = `
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
 }
 
-.circuit-4 {
+.circuit-3 {
   display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
@@ -279,20 +257,17 @@ exports[`Button Style tests should have default styles 1`] = `
 }
 
 <button
-  class="circuit-6 circuit-7"
+  class="circuit-5 circuit-6"
 >
   <div
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
   >
-    <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-0 circuit-1"
-      role="alert"
+    <span
+      class="circuit-0"
     />
   </div>
   <span
-    class="circuit-4 circuit-5"
+    class="circuit-3 circuit-4"
   />
 </button>
 `;
@@ -300,33 +275,19 @@ exports[`Button Style tests should have default styles 1`] = `
 exports[`Button Style tests should have isLoading styles 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-.circuit-7 {
+.circuit-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -359,33 +320,33 @@ exports[`Button Style tests should have isLoading styles 1`] = `
   overflow: hidden;
 }
 
-.circuit-7:focus {
+.circuit-6:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-7:focus::-moz-focus-inner {
+.circuit-6:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-7:disabled,
-.circuit-7[disabled] {
+.circuit-6:disabled,
+.circuit-6[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-7:hover {
+.circuit-6:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-7:active {
+.circuit-6:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 24px;
   width: 24px;
   position: absolute;
@@ -405,22 +366,20 @@ exports[`Button Style tests should have isLoading styles 1`] = `
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
 }
 
-.circuit-4 {
+.circuit-3 {
   display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
@@ -432,20 +391,17 @@ exports[`Button Style tests should have isLoading styles 1`] = `
 }
 
 <button
-  class="circuit-6 circuit-7"
+  class="circuit-5 circuit-6"
 >
   <div
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
   >
-    <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-0 circuit-1"
-      role="alert"
+    <span
+      class="circuit-0"
     />
   </div>
   <span
-    class="circuit-4 circuit-5"
+    class="circuit-3 circuit-4"
   />
 </button>
 `;
diff --git a/src/components/LoadingButton/components/LoadingIcon/__snapshots__/LoadingIcon.spec.js.snap b/src/components/LoadingButton/components/LoadingIcon/__snapshots__/LoadingIcon.spec.js.snap
index 88460bc9ea..7868fe4a3f 100644
--- a/src/components/LoadingButton/components/LoadingIcon/__snapshots__/LoadingIcon.spec.js.snap
+++ b/src/components/LoadingButton/components/LoadingIcon/__snapshots__/LoadingIcon.spec.js.snap
@@ -3,33 +3,19 @@
 exports[`LoadingIcon Style tests should have active LoadingIcon styles 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-.circuit-2 {
+.circuit-1 {
   height: 16px;
   width: 16px;
   position: absolute;
@@ -49,30 +35,24 @@ exports[`LoadingIcon Style tests should have active LoadingIcon styles 1`] = `
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
-  opacity: 1;
 }
 
 <div
-  class="circuit-2 circuit-3"
+  class="circuit-1 circuit-2"
 >
-  <div
-    aria-busy="true"
-    aria-live="assertive"
-    class="circuit-0 circuit-1"
-    role="alert"
+  <span
+    class="circuit-0"
   />
 </div>
 `;
@@ -80,19 +60,19 @@ exports[`LoadingIcon Style tests should have active LoadingIcon styles 1`] = `
 exports[`LoadingIcon Style tests should have disabled LoadingIcon styles 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 16px;
   width: 16px;
   position: absolute;
@@ -112,29 +92,24 @@ exports[`LoadingIcon Style tests should have disabled LoadingIcon styles 1`] = `
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
 }
 
 <div
-  class="circuit-2 circuit-3"
+  class="circuit-1 circuit-2"
 >
-  <div
-    aria-busy="true"
-    aria-live="assertive"
-    class="circuit-0 circuit-1"
-    role="alert"
+  <span
+    class="circuit-0"
   />
 </div>
 `;
@@ -142,29 +117,15 @@ exports[`LoadingIcon Style tests should have disabled LoadingIcon styles 1`] = `
 exports[`LoadingIcon Style tests should have error LoadingIcon styles 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
@@ -184,7 +145,7 @@ exports[`LoadingIcon Style tests should have error LoadingIcon styles 1`] = `
   }
 }
 
-.circuit-3 {
+.circuit-2 {
   height: 16px;
   width: 16px;
   position: absolute;
@@ -204,22 +165,20 @@ exports[`LoadingIcon Style tests should have error LoadingIcon styles 1`] = `
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 100%;
   width: 100%;
   position: absolute;
@@ -238,16 +197,13 @@ exports[`LoadingIcon Style tests should have error LoadingIcon styles 1`] = `
 }
 
 <div
-  class="circuit-3 circuit-4"
+  class="circuit-2 circuit-3"
 >
-  <div
-    aria-busy="true"
-    aria-live="assertive"
-    class="circuit-0 circuit-1"
-    role="alert"
+  <span
+    class="circuit-0"
   />
   <svg
-    class="circuit-2"
+    class="circuit-1"
     fill="none"
     height="24"
     viewBox="0 0 24 24"
@@ -267,49 +223,33 @@ exports[`LoadingIcon Style tests should have error LoadingIcon styles 1`] = `
 exports[`LoadingIcon Style tests should have giga LoadingIcon styles 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 32px;
   width: 32px;
   position: absolute;
@@ -329,13 +269,10 @@ exports[`LoadingIcon Style tests should have giga LoadingIcon styles 1`] = `
 }
 
 <div
-  class="circuit-2 circuit-3"
+  class="circuit-1 circuit-2"
 >
-  <div
-    aria-busy="true"
-    aria-live="assertive"
-    class="circuit-0 circuit-1"
-    role="alert"
+  <span
+    class="circuit-0"
   />
 </div>
 `;
@@ -343,33 +280,19 @@ exports[`LoadingIcon Style tests should have giga LoadingIcon styles 1`] = `
 exports[`LoadingIcon Style tests should have kilo LoadingIcon styles 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-.circuit-2 {
+.circuit-1 {
   height: 16px;
   width: 16px;
   position: absolute;
@@ -389,29 +312,24 @@ exports[`LoadingIcon Style tests should have kilo LoadingIcon styles 1`] = `
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
 }
 
 <div
-  class="circuit-2 circuit-3"
+  class="circuit-1 circuit-2"
 >
-  <div
-    aria-busy="true"
-    aria-live="assertive"
-    class="circuit-0 circuit-1"
-    role="alert"
+  <span
+    class="circuit-0"
   />
 </div>
 `;
@@ -419,49 +337,33 @@ exports[`LoadingIcon Style tests should have kilo LoadingIcon styles 1`] = `
 exports[`LoadingIcon Style tests should have mega LoadingIcon styles 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 24px;
   width: 24px;
   position: absolute;
@@ -481,13 +383,10 @@ exports[`LoadingIcon Style tests should have mega LoadingIcon styles 1`] = `
 }
 
 <div
-  class="circuit-2 circuit-3"
+  class="circuit-1 circuit-2"
 >
-  <div
-    aria-busy="true"
-    aria-live="assertive"
-    class="circuit-0 circuit-1"
-    role="alert"
+  <span
+    class="circuit-0"
   />
 </div>
 `;
@@ -495,29 +394,15 @@ exports[`LoadingIcon Style tests should have mega LoadingIcon styles 1`] = `
 exports[`LoadingIcon Style tests should have success LoadingIcon styles 1`] = `
 @keyframes animation-0 {
   0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
@@ -537,7 +422,7 @@ exports[`LoadingIcon Style tests should have success LoadingIcon styles 1`] = `
   }
 }
 
-.circuit-3 {
+.circuit-2 {
   height: 16px;
   width: 16px;
   position: absolute;
@@ -557,22 +442,20 @@ exports[`LoadingIcon Style tests should have success LoadingIcon styles 1`] = `
 }
 
 .circuit-0 {
+  display: block;
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  border: 2px solid #FFFFFF;
+  border: 2px solid currentColor;
   border-top-color: transparent;
   -webkit-animation: animation-0 1s infinite linear;
   animation: animation-0 1s infinite linear;
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
 }
 
-.circuit-2 {
+.circuit-1 {
   height: 100%;
   width: 100%;
   position: absolute;
@@ -591,16 +474,13 @@ exports[`LoadingIcon Style tests should have success LoadingIcon styles 1`] = `
 }
 
 <div
-  class="circuit-3 circuit-4"
+  class="circuit-2 circuit-3"
 >
-  <div
-    aria-busy="true"
-    aria-live="assertive"
-    class="circuit-0 circuit-1"
-    role="alert"
+  <span
+    class="circuit-0"
   />
   <svg
-    class="circuit-2"
+    class="circuit-1"
     fill="none"
     height="24"
     viewBox="0 0 24 24"
diff --git a/src/components/Spinner/Spinner.js b/src/components/Spinner/Spinner.js
deleted file mode 100644
index b0a71a1702..0000000000
--- a/src/components/Spinner/Spinner.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { css, keyframes } from '@emotion/core';
-
-const spin = keyframes`
-  0% {
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-  100% {
-    transform: rotate3d(0, 0, 1, 360deg);
-  }
-`;
-
-const baseStyles = ({ theme }) => css`
-  label: spinner;
-  width: ${theme.iconSizes.mega};
-  height: ${theme.iconSizes.mega};
-  border-radius: ${theme.borderRadius.circle};
-  border: ${theme.borderWidth.mega} solid ${theme.colors.white};
-  border-top-color: transparent;
-  animation: ${spin} 1s infinite linear;
-  transform-origin: 50% 50%;
-  opacity: 0;
-  transition: opacity 200ms ease-in-out;
-`;
-
-const activeStyles = ({ active }) =>
-  active &&
-  css`
-    opacity: 1;
-  `;
-
-const darkStyles = ({ theme, dark }) =>
-  dark &&
-  css`
-    label: spinner--dark;
-    border-color: ${theme.colors.n900};
-    border-top-color: transparent;
-  `;
-
-/**
- * A loading spinner with ARIA labels support.
- */
-const Spinner = styled.div`
-  ${baseStyles};
-  ${activeStyles};
-  ${darkStyles};
-`;
-
-Spinner.propTypes = {
-  /**
-   * Renders a dark variant of the Spinner.
-   */
-  dark: PropTypes.bool,
-  active: PropTypes.bool
-};
-
-Spinner.defaultProps = {
-  dark: false,
-  active: true,
-
-  /**
-   * Accessibilty attributes.
-   */
-  /**
-   * Indicates that element has been dynamically updated.
-   */
-  role: 'alert',
-  /**
-   * Tells screen reader to wait until loading is complete.
-   */
-  'aria-busy': 'true',
-  /**
-   * Indicates that updates to the region have the highest priority.
-   */
-  'aria-live': 'assertive'
-};
-
-/**
- * @component
- */
-export default Spinner;
diff --git a/src/components/Spinner/Spinner.spec.js b/src/components/Spinner/Spinner.spec.tsx
similarity index 77%
rename from src/components/Spinner/Spinner.spec.js
rename to src/components/Spinner/Spinner.spec.tsx
index 7fc9fc6de5..44dfbe31e3 100644
--- a/src/components/Spinner/Spinner.spec.js
+++ b/src/components/Spinner/Spinner.spec.tsx
@@ -15,7 +15,9 @@
 
 import React from 'react';
 
-import Spinner from './Spinner';
+import { create, renderToHtml, axe } from '../../util/test-utils';
+
+import { Spinner } from './Spinner';
 
 describe('Spinner', () => {
   /**
@@ -26,16 +28,6 @@ describe('Spinner', () => {
     expect(actual).toMatchSnapshot();
   });
 
-  it('should render with dark styles', () => {
-    const actual = create(<Spinner dark />);
-    expect(actual).toMatchSnapshot();
-  });
-
-  it('should render with active styles', () => {
-    const actual = create(<Spinner active />);
-    expect(actual).toMatchSnapshot();
-  });
-
   /**
    * Accessibility tests.
    */
diff --git a/src/components/Spinner/Spinner.story.js b/src/components/Spinner/Spinner.story.tsx
similarity index 61%
rename from src/components/Spinner/Spinner.story.js
rename to src/components/Spinner/Spinner.story.tsx
index a67d144076..894d77fe38 100644
--- a/src/components/Spinner/Spinner.story.js
+++ b/src/components/Spinner/Spinner.story.tsx
@@ -14,22 +14,9 @@
  */
 
 import React from 'react';
-import { boolean } from '@storybook/addon-knobs/react';
-import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
-import Spinner from './Spinner';
-
-const Container = styled('div')(
-  ({ theme }) => css`
-    align-items: center;
-    background-color: ${theme.colors.n500};
-    display: flex;
-    height: 50px;
-    justify-content: center;
-    width: 50px;
-  `
-);
+import Spinner from '.';
 
 export default {
   title: 'Components/Spinner',
@@ -39,8 +26,12 @@ export default {
   }
 };
 
-export const base = () => (
-  <Container>
-    <Spinner dark={boolean('Dark', false)} active={boolean('Active', true)} />
-  </Container>
+export const Base = () => (
+  <Spinner
+    css={theme =>
+      css`
+        color: ${theme.colors.n900};
+      `
+    }
+  />
 );
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
new file mode 100644
index 0000000000..cb8685a275
--- /dev/null
+++ b/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HTMLProps } from 'react';
+import { css, keyframes } from '@emotion/core';
+
+import styled, { StyleProps } from '../../styles/styled';
+
+const spin = keyframes`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+
+const baseStyles = ({ theme }: StyleProps) => css`
+  label: spinner;
+  display: block;
+  width: ${theme.iconSizes.mega};
+  height: ${theme.iconSizes.mega};
+  border-radius: ${theme.borderRadius.circle};
+  border: ${theme.borderWidth.mega} solid currentColor;
+  border-top-color: transparent;
+  animation: ${spin} 1s infinite linear;
+  transform-origin: 50% 50%;
+`;
+
+/**
+ * A spinning loading icon.
+ */
+export const Spinner = styled.span<HTMLProps<HTMLDivElement>>(baseStyles);
diff --git a/src/components/Spinner/__snapshots__/Spinner.spec.js.snap b/src/components/Spinner/__snapshots__/Spinner.spec.js.snap
deleted file mode 100644
index 1f1ea61be6..0000000000
--- a/src/components/Spinner/__snapshots__/Spinner.spec.js.snap
+++ /dev/null
@@ -1,151 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Spinner should render with active styles 1`] = `
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-.circuit-0 {
-  width: 24px;
-  height: 24px;
-  border-radius: 100%;
-  border: 2px solid #FFFFFF;
-  border-top-color: transparent;
-  -webkit-animation: animation-0 1s infinite linear;
-  animation: animation-0 1s infinite linear;
-  -webkit-transform-origin: 50% 50%;
-  -ms-transform-origin: 50% 50%;
-  transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
-  opacity: 1;
-}
-
-<div
-  aria-busy="true"
-  aria-live="assertive"
-  class="circuit-0 circuit-1"
-  role="alert"
-/>
-`;
-
-exports[`Spinner should render with dark styles 1`] = `
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-.circuit-0 {
-  width: 24px;
-  height: 24px;
-  border-radius: 100%;
-  border: 2px solid #FFFFFF;
-  border-top-color: transparent;
-  -webkit-animation: animation-0 1s infinite linear;
-  animation: animation-0 1s infinite linear;
-  -webkit-transform-origin: 50% 50%;
-  -ms-transform-origin: 50% 50%;
-  transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
-  opacity: 1;
-  border-color: #212933;
-  border-top-color: transparent;
-}
-
-<div
-  aria-busy="true"
-  aria-live="assertive"
-  class="circuit-0 circuit-1"
-  role="alert"
-/>
-`;
-
-exports[`Spinner should render with default styles 1`] = `
-@keyframes animation-0 {
-  0% {
-    -webkit-transform: rotate3d(0,0,1,0deg);
-    -ms-transform: rotate3d(0,0,1,0deg);
-    transform: rotate3d(0,0,1,0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0,0,1,360deg);
-    -ms-transform: rotate3d(0,0,1,360deg);
-    transform: rotate3d(0,0,1,360deg);
-  }
-}
-
-.circuit-0 {
-  width: 24px;
-  height: 24px;
-  border-radius: 100%;
-  border: 2px solid #FFFFFF;
-  border-top-color: transparent;
-  -webkit-animation: animation-0 1s infinite linear;
-  animation: animation-0 1s infinite linear;
-  -webkit-transform-origin: 50% 50%;
-  -ms-transform-origin: 50% 50%;
-  transform-origin: 50% 50%;
-  opacity: 0;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
-  opacity: 1;
-}
-
-<div
-  aria-busy="true"
-  aria-live="assertive"
-  class="circuit-0 circuit-1"
-  role="alert"
-/>
-`;
diff --git a/src/components/Spinner/__snapshots__/Spinner.spec.tsx.snap b/src/components/Spinner/__snapshots__/Spinner.spec.tsx.snap
new file mode 100644
index 0000000000..ea30f31433
--- /dev/null
+++ b/src/components/Spinner/__snapshots__/Spinner.spec.tsx.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spinner should render with default styles 1`] = `
+@keyframes animation-0 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.circuit-0 {
+  display: block;
+  width: 24px;
+  height: 24px;
+  border-radius: 100%;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  -webkit-animation: animation-0 1s infinite linear;
+  animation: animation-0 1s infinite linear;
+  -webkit-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+}
+
+<span
+  class="circuit-0"
+/>
+`;
diff --git a/src/components/Spinner/index.js b/src/components/Spinner/index.ts
similarity index 94%
rename from src/components/Spinner/index.js
rename to src/components/Spinner/index.ts
index 28ffcf32b6..1d06008e66 100644
--- a/src/components/Spinner/index.js
+++ b/src/components/Spinner/index.ts
@@ -13,6 +13,6 @@
  * limitations under the License.
  */
 
-import Spinner from './Spinner';
+import { Spinner } from './Spinner';
 
 export default Spinner;