1 files changed, 25 insertions, 46 deletions

diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 728f9a27aca..5ea3866a1b9 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -187,12 +187,9 @@ a {
   animation: fadeInFull $fade-in-duration 1;
 }
 
-
 .animation-container {
-  background: $repo-editor-grey;
   height: 40px;
   overflow: hidden;
-  position: relative;
 
   &.animation-container-small {
     height: 12px;
@@ -205,60 +202,42 @@ a {
     }
   }
 
-  &::before {
-    animation-duration: 1s;
-    animation-fill-mode: forwards;
-    animation-iteration-count: infinite;
-    animation-name: blockTextShine;
-    animation-timing-function: linear;
-    background-image: $repo-editor-linear-gradient;
-    background-repeat: no-repeat;
-    background-size: 800px 45px;
-    content: ' ';
-    display: block;
-    height: 100%;
+  [class^="skeleton-line-"] {
     position: relative;
-  }
+    background-color: rgba(0, 0, 0, 0.06);
+    height: 10px;
+    overflow: hidden;
+
+    &:not(:last-of-type) {
+      margin-bottom: 4px;
+    }
 
-  div {
-    background: $white-light;
-    height: 6px;
-    left: 0;
-    position: absolute;
-    right: 0;
+    &:after {
+      content: ' ';
+      display: block;
+      animation-duration: 1s;
+      animation-fill-mode: forwards;
+      animation-iteration-count: infinite;
+      animation-name: blockTextShine;
+      animation-timing-function: linear;
+      background-repeat: no-repeat;
+      background-size: 800px 45px;
+      background-image: $repo-editor-linear-gradient;
+      height: 12px;
+      width: 100%;
+    }
   }
 
   .skeleton-line-1 {
-    left: 0;
-    top: 8px;
+    width: 156px;
   }
 
   .skeleton-line-2 {
-    left: 150px;
-    top: 0;
-    height: 10px;
+    width: 235px;
   }
 
   .skeleton-line-3 {
-    left: 0;
-    top: 23px;
-  }
-
-  .skeleton-line-4 {
-    left: 0;
-    top: 38px;
-  }
-
-  .skeleton-line-5 {
-    left: 200px;
-    top: 28px;
-    height: 10px;
-  }
-
-  .skeleton-line-6 {
-    top: 14px;
-    left: 230px;
-    height: 10px;
+    width: 200px;
   }
 }