diff --git a/src/components/loading/_index.scss b/src/components/loading/_index.scss
index 45694e2e4f35..5b92ffeb378a 100644
--- a/src/components/loading/_index.scss
+++ b/src/components/loading/_index.scss
@@ -1,3 +1,4 @@
+@import 'variables';
 @import 'mixins';
 @import 'loading_kibana';
 @import 'loading_chart';
diff --git a/src/components/loading/_loading_content.scss b/src/components/loading/_loading_content.scss
index 98c697220f0a..78922ef2f47b 100644
--- a/src/components/loading/_loading_content.scss
+++ b/src/components/loading/_loading_content.scss
@@ -1,30 +1,27 @@
-$gradientStartStop: shadeOrTint($euiColorLightestShade, 8%, 12%);
-$gradientMiddle: shadeOrTint($euiColorLightestShade, 2%, 4%);
-
 .euiLoadingContent__loader {
   width: 100%;
 }
 
-.euiLoadingContent__single-line {
+.euiLoadingContent__singleLine {
   height: $euiSize;
   margin-bottom: $euiSizeS;
   border-radius: $euiBorderRadius;
   width: 100%;
-  background-size: 200% 100% !important; // sass-lint:disable-line no-important
   background: linear-gradient(
     to right,
-    $gradientStartStop 8%,
-    $gradientMiddle 18%,
-    $gradientStartStop 33%,
-  );
-  animation: GradientLoad 1.5s $euiAnimSlightResistance infinite;
+    $euiGradientStartStop 8%,
+    $euiGradientMiddle 18%,
+    $euiGradientStartStop 33%,
+    );
+  background-size: 200% 100%;
+  animation: euiLoadingContentGradientLoad 1.5s $euiAnimSlightResistance infinite;
 
   &:last-child:not(:only-child) {
     width: 75%;
   }
 }
 
-@keyframes GradientLoad {
+@keyframes euiLoadingContentGradientLoad {
   0% {
     background-position: 100% 0%;
   }
diff --git a/src/components/loading/_variables.scss b/src/components/loading/_variables.scss
new file mode 100644
index 000000000000..2d4bd388dd93
--- /dev/null
+++ b/src/components/loading/_variables.scss
@@ -0,0 +1,2 @@
+$euiGradientStartStop: tintOrShade($euiColorLightShade, 5%, 12%);
+$euiGradientMiddle: tintOrShade($euiColorLightShade, 50%, 24%);
diff --git a/src/components/loading/loading_content.tsx b/src/components/loading/loading_content.tsx
index 1dbbe2fc47f9..8b635c6eb529 100644
--- a/src/components/loading/loading_content.tsx
+++ b/src/components/loading/loading_content.tsx
@@ -15,7 +15,7 @@ export const EuiLoadingContent: FunctionComponent<
 
   for (let i = 0; i < lines; i++) {
     lineElements.push(
-      <div key={i} className="euiLoadingContent__single-line" />
+      <div key={i} className="euiLoadingContent__singleLine" />
     );
   }