Added loader on app initialization. Moved all css/js to the end of body

src/components/ui/loader/loader.html

@@ -0,0 +1,12 @@
+<div id="loader" class="loader-overlay">
+    <div class="loader">
+        <div class="loader__cube loader__cube--1"></div>
+        <div class="loader__cube loader__cube--2"></div>
+        <div class="loader__cube loader__cube--3"></div>
+        <div class="loader__cube loader__cube--4"></div>
+        <div class="loader__cube loader__cube--5"></div>
+        <div class="loader__cube loader__cube--6"></div>
+        <div class="loader__cube loader__cube--7"></div>
+        <div class="loader__cube loader__cube--8"></div>
+    </div>
+</div>

src/components/ui/loader/loader.scss

@@ -0,0 +1,131 @@
+.loader-overlay {
+    background: rgba(255, 255, 255, 0.3);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+
+    visibility: hidden;
+    opacity: 0;
+
+    transition: 0.4s ease;
+
+    &.is-active {
+        opacity: 1;
+        visibility: visible;
+        transition: 0.05s ease;
+    }
+}
+
+.loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -75px;
+    margin-left: -75px;
+    width: 153px;
+    height: 153px;
+
+    &__cube {
+        position: absolute;
+        margin: -1px;
+        padding: 0;
+        width: 50px;
+        height: 50px;
+        background: rgba(35, 35, 35, 0.6);
+        display: inline-block;
+        animation-iteration-count: infinite;
+        animation-duration: .5s;
+        animation-timing-function: linear;
+
+        &--1 {
+            margin: 0 0 0 0;
+            animation-name: cube1;
+        }
+
+        &--2 {
+            margin: 0 0 0 051px;
+            animation-name: cube2;
+        }
+
+        &--3 {
+            margin: 0 0 0 102px;
+            animation-name: cube3;
+        }
+
+        &--4 {
+            margin: 51px 0 0 0;
+            animation-name: cube4;
+        }
+
+        &--5 {
+            margin: 051px 0 0 051px;
+        }
+
+        &--6 {
+            margin: 51px 0 0 102px;
+            animation-name: cube6;
+        }
+
+        &--7 {
+            margin: 102px 0 0 0;
+            animation-name: cube7;
+        }
+
+        &--8 {
+            margin: 102px 0 0 051px;
+            animation-name: cube8;
+        }
+    }
+}
+
+@keyframes cube1 {
+    25%{ margin: 0 0 0 0;}
+    50%{ margin: 0 0 0 51px;}
+    75%{ margin: 0 0 0 51px;}
+    100%{margin: 0 0 0 51px;}
+}
+
+@keyframes cube2 {
+    25%{ margin: 0 0 0  51px;}
+    50%{ margin: 0 0 0 102px;}
+    75%{ margin: 0 0 0 102px;}
+    100%{margin: 0 0 0 102px;}
+}
+
+@keyframes cube3 {
+    25%{ margin: 51px 0 0 102px;}
+    50%{ margin: 51px 0 0 102px;}
+    75%{ margin: 51px 0 0 102px;}
+    100%{margin: 51px 0 0 102px;}
+}
+
+@keyframes cube4 {
+    25%{ margin: 51px 0 0 0;}
+    50%{ margin: 51px 0 0 0;}
+    75%{ margin:    0 0 0 0;}
+    100%{margin:    0 0 0 0;}
+}
+
+@keyframes cube6 {
+    25%{ margin: 102px 0 0 102px;}
+    50%{ margin: 102px 0 0 102px;}
+    75%{ margin: 102px 0 0 102px;}
+    100%{margin: 102px 0 0  51px;}
+}
+
+@keyframes cube7 {
+    25%{ margin: 102px 0 0 0;}
+    50%{ margin: 102px 0 0 0;}
+    75%{ margin:  51px 0 0 0;}
+    100%{margin:  51px 0 0 0;}
+}
+
+@keyframes cube8 {
+    25%{ margin: 102px 0 0 51px;}
+    50%{ margin: 102px 0 0 51px;}
+    75%{ margin: 102px 0 0 51px;}
+    100%{margin: 102px 0 0    0;}
+}