Loading page and landing page initial styling.

html/static/css/loaders.css

@@ -0,0 +1,86 @@
+#loading-page {
+    background-color: var(--color-dark);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    z-index: 10000;
+    top: 0;
+    left: 0;
+    align-content: center;
+    align-items: baseline;
+    flex-wrap: wrap;
+    transition: opacity 0.5s;
+}
+
+.newtons-cradle {
+    --uib-speed: 1.2s;
+    --uib-color: var(--color-primary);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 75px;
+    height: 75px;
+}
+   
+.newtons-cradle-dot {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 1.8rem;
+    transform-origin: center top;
+}
+   
+.newtons-cradle-dot::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 25%;
+    border-radius: 50%;
+    background-color: var(--uib-color);
+}
+   
+.newtons-cradle-dot:first-child {
+    animation: swing var(--uib-speed) linear infinite;
+}
+   
+.newtons-cradle-dot:last-child {
+    animation: swing2 var(--uib-speed) linear infinite;
+}
+   
+@keyframes swing {
+    0% {
+     transform: rotate(0deg);
+     animation-timing-function: ease-out;
+    }
+   
+    25% {
+     transform: rotate(70deg);
+     animation-timing-function: ease-in;
+    }
+   
+    50% {
+     transform: rotate(0deg);
+     animation-timing-function: linear;
+    }
+}
+   
+@keyframes swing2 {
+    0% {
+     transform: rotate(0deg);
+     animation-timing-function: linear;
+    }
+   
+    50% {
+     transform: rotate(0deg);
+     animation-timing-function: ease-out;
+    }
+   
+    75% {
+     transform: rotate(-70deg);
+     animation-timing-function: ease-in;
+    }
+}