diff --git a/src/components/loading/_loading_content.scss b/src/components/loading/_loading_content.scss
index 78922ef2f47b..d674aa910c22 100644
--- a/src/components/loading/_loading_content.scss
+++ b/src/components/loading/_loading_content.scss
@@ -3,31 +3,37 @@
 }
 
 .euiLoadingContent__singleLine {
+  width: 100%;
   height: $euiSize;
   margin-bottom: $euiSizeS;
   border-radius: $euiBorderRadius;
-  width: 100%;
-  background: linear-gradient(
-    to right,
-    $euiGradientStartStop 8%,
-    $euiGradientMiddle 18%,
-    $euiGradientStartStop 33%,
-    );
-  background-size: 200% 100%;
-  animation: euiLoadingContentGradientLoad 1.5s $euiAnimSlightResistance infinite;
+  overflow: hidden;
 
   &:last-child:not(:only-child) {
     width: 75%;
   }
+
+}
+
+.euiLoadingContent__singleLine--background {
+  width: 220%;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    $euiGradientStartStop 45%,
+    $euiGradientMiddle 50%,
+    $euiGradientStartStop 55%,
+    );
+  animation: euiLoadingContentGradientLoad 1.5s $euiAnimSlightResistance infinite;
 }
 
 @keyframes euiLoadingContentGradientLoad {
   0% {
-    background-position: 100% 0%;
+    transform: translateX(-53%);
   }
 
   100% {
-    background-position: -100% 0%;
+    transform: translateX(0);
   }
 }
 
diff --git a/src/components/loading/loading_content.tsx b/src/components/loading/loading_content.tsx
index 8b635c6eb529..ef885a5c421b 100644
--- a/src/components/loading/loading_content.tsx
+++ b/src/components/loading/loading_content.tsx
@@ -15,7 +15,9 @@ export const EuiLoadingContent: FunctionComponent<
 
   for (let i = 0; i < lines; i++) {
     lineElements.push(
-      <div key={i} className="euiLoadingContent__singleLine" />
+      <div key={i} className="euiLoadingContent__singleLine">
+        <div className="euiLoadingContent__singleLine--background" />
+      </div>
     );
   }