[Backport 1.9] COMPASS 1417 Remove loading animation scrollbars (#1195) (#1204)

pzrq · web-flow · commit aa28275627dd · 2017-08-11T16:12:44.000+10:00
* Temporarily disable hiding the loading animation

So it's easier to inspect its state.

* Remove default 8px margin

* Use standard top/left pattern from .sq CSS class

* Go back to width: 100% removing margin/padding

No flexbox needed in this context.

* Remove duplicate text-align

* Abstract towards a reusable loading animation component

CSS animation appears to be special enough I don't know how to handle it in this context, perhaps it needs another wrapper?

* Revert "Temporarily disable hiding the loading animation"
diff --git a/src/app/loading/loading.html b/src/app/loading/loading.html
@@ -4,8 +4,10 @@
     <link href="style.css" rel="stylesheet" type="text/css">
   </head>
   <body>
-    <div class="sq sq1"></div>
-    <div class="sq sq2"></div>
-    <span>loading&hellip;</span>
+    <div class="loading-animation">
+      <div class="sq sq1"></div>
+      <div class="sq sq2"></div>
+      <span>loading&hellip;</span>
+    </div>
   </body>
 </html>
diff --git a/src/app/loading/style.css b/src/app/loading/style.css
@@ -9,22 +9,28 @@
 }
 
 html, body {
-  height: 100%;
-  width: 100%;
   font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #333;
   font-weight: bold;
   -webkit-font-smoothing: antialiased;
+  margin: 0;
   position: relative;
 }
 
+.loading-animation {
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  width: 100vw;
+}
+
 .sq {
   background: #43B1E5;
   position: absolute;
-  top: 50%;
-  left: 50%;
   height: 12px;
   width: 12px;
+  /* So animation does not overlap with loading text */
   margin-top: -36px;
 }
 
@@ -58,14 +64,9 @@ html, body {
 }
 
 span {
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  padding-left: 6px;
   text-align: center;
   font-size: 11px;
   line-height: 1;
   text-transform: uppercase;
-  text-align: center;
-  -moz-osx-font-smoothing: grayscale;
+  width: 100%;
 }
