Transforming the x position rather than animating the background posi…

…tion.
elastic · Mar 21, 2019 · 9c8bc32 · 9c8bc32
1 parent 21ff5a6
commit 9c8bc32
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git 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
@@ -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>
     );
   }