From 82ca57c92751249f219d8ff3d41ae2634572de27 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Wed, 12 Aug 2020 19:47:19 -0500
Subject: [PATCH] animated NASA logo loader

---
 public/index.html | 245 +++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 231 insertions(+), 14 deletions(-)
diff --git a/public/index.html b/public/index.html
index 4123528..99e2850 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +1,234 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+        <title><%= htmlWebpackPlugin.options.title %></title>
+        <style>
+            @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700&display=swap');
+
+            /* Shamelessly stolen from Tim Hazledine */
+            /* Source: https://codepen.io/tomhazledine/pen/dvKZLg */
+
+            .logo {
+                position: fixed;
+                width: 10em;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+            .swoosh {
+                display: block;
+                position: absolute;
+            }
+
+            .swoosh-1 {
+                top: 3.5em;
+                width: 5em;
+                height: 3em;
+                border-top: 0.5em solid #ee2c3e;
+                border-top-left-radius: 10em 2em;
+                z-index: 3;
+                transform: rotate(-10deg);
+            }
+
+            .swoosh-2 {
+                top: -.3em;
+                left: 4em;
+                width: 6em;
+                height: 3em;
+                border-bottom: 0.5em solid #ee2c3e;
+                border-bottom-right-radius: 10em 4em;
+                z-index: 1;
+                transform: rotate(-10deg);
+            }
+
+            .swoosh-3 {
+                top: .8em;
+                left: 5em;
+                width: 5em;
+                height: 2em;
+                transform: rotate(-30deg);
+                border-bottom: 0.2em solid #ee2c3e;
+                border-bottom-right-radius: 10em 2em;
+                z-index: 5;
+            }
+
+            .swoosh-4 {
+                top: 4.7em;
+                left: 2em;
+                width: 6em;
+                height: 4em;
+                border-top: 0.2em solid #ee2c3e;
+                border-top-left-radius: 10em 3em;
+                z-index: 5;
+                transform: rotate(-30deg);
+            }
+
+            .text {
+                position: absolute;
+                z-index: 4;
+                top: 35px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 20em;
+                text-align: center;
+                display: block;
+                color: #ffffff;
+                line-height: .8;
+                font-size: 47px;
+            }
+
+            .orbit-outer {
+                position: relative;
+                width: 8em;
+                height: 8em;
+                margin-left: 0;
+                perspective: 10em;
+                transform: rotate(45deg);
+                z-index: 2;
+            }
+
+            .orbit-wrapper {
+                font-size: 2em;
+                margin: 0 auto;
+                transform: rotateX(-60deg) translateZ(0);
+                transform-style: preserve-3d;
+                width: 4em;
+                height: 4em;
+            }
+
+            .orbit {
+                width: 4em;
+                height: 4em;
+                border-radius: 50%;
+                border: .1rem solid white;
+                border-left-width: 0;
+                position: relative;
+                animation: spin 2s infinite linear;
+            }
+
+            .orbit:after {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 0;
+                left: -.05rem;
+                border-radius: 2em 0 0 0;
+                border-left: .4rem solid white;
+                width: 2em;
+                height: 2em;
+                transform: rotate(15deg);
+                transform-origin: 100% 100%;
+            }
+
+            .orbit:before {
+                content: "";
+                display: block;
+                position: absolute;
+                bottom: 2.3em;
+                left: 0;
+                background: white;
+                transform: rotate(15deg);
+                width: .5rem;
+                height: .8rem;
+                border-radius: 50%;
+            }
+
+            @keyframes spin {
+                0% {
+                    transform: rotate(0);
+                }
+                100% {
+                    transform: rotate(-360deg);
+                }
+            }
+
+            .stars {
+                position: absolute;
+                top: 0;
+                left: 9em;
+                font-size: .2em;
+                width: .5em;
+                height: .5em;
+                background: white;
+                border-radius: 50%;
+                box-shadow: white 2em 0 0 -.1em, white 1em 1em 0 -.1em, white 1.4em -1em 0 -.2em, white -1em -.3em 0 -.1em, white -.1em 1.2em 0 -.2em, white -2em 1.5em 0 -.2em, white .5em 1.8em 0 -.1em, white 1em 2em 0 -.2em, white 2em 2.5em 0 -.2em, white 2.3em 2.1em 0 -.2em;
+            }
+
+            .stars.stars-2 {
+                top: 11em;
+                left: 12em;
+                transform: rotate(-40deg);
+            }
+
+            .stars.stars-3 {
+                top: 9em;
+                left: 0;
+                transform: rotate(45deg);
+            }
+
+            #loader {
+                z-index: 100;
+                background: #205fac;
+                padding: 0;
+                font-family: 'Exo 2';
+                text-transform: uppercase;
+                overflow: hidden;
+                min-height: calc(100vh - 60px);
+            }
+
+            body, html {
+                font-size: 15px;
+                background: #edf0f6;
+                margin: 0;
+                width: 100vw;
+                height: 100vh;
+            }
+
+            #app, #loader {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+            }
+
+            h1 {
+                margin: 0;
+                padding: 0;
+                border: 0;
+                vertical-align: baseline;
+            }
+        </style>
+    </head>
+    <body>
+        <noscript>
+            <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
+                enabled. Please enable it to continue.</strong>
+        </noscript>
+        <div id="app">
+            <div id="loader">
+                <div class="logo">
+                    <div class="stars stars-1"></div>
+                    <div class="stars stars-2"></div>
+                    <div class="stars stars-3"></div>
+                    <div class="swooshes">
+                        <span class="swoosh swoosh-1"></span>
+                        <span class="swoosh swoosh-2"></span>
+                        <span class="swoosh swoosh-3"></span>
+                        <span class="swoosh swoosh-4"></span>
+                    </div>
+                    <h1 class="text">nasa</h1>
+                    <div class="orbit-outer">
+                        <div class="orbit-wrapper">
+                            <div class="orbit"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- built files will be auto injected -->
+    </body>
 </html>
