fake progress bar (#342)

decentraland · Jul 19, 2019 · 3aaa2f1 · 3aaa2f1
1 parent 2f3eaa4
commit 3aaa2f1
Show file tree

Hide file tree

Showing 3 changed files with 1,417 additions and 1,392 deletions.
diff --git a/static/images/progress-logo.png b/static/images/progress-logo.png
diff --git a/static/index.html b/static/index.html
@@ -1,66 +1,135 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-    <link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
-    <title>Decentraland</title>
-    <style>
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        overflow: hidden;
-        touch-action: none;
-      }
 
-      #gameContainer {
-        width: 100vw;
-        height: 100vh;
-      }
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+  <link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
+  <title>Decentraland</title>
+  <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      overflow: hidden;
+      touch-action: none;
+    }
+
+    #gameContainer {
+      width: 100vw;
+      height: 100vh;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      background: #e3e3e3;
+      color: #333;
+      font-family: 'open sans', roboto, 'helvetica neue', sans-serif;
+      font-size: 0.8em;
+    }
+
+    canvas {
+      position: relative;
+      z-index: 1000;
+      width: 100%;
+      height: 100%;
+    }
+
+    .loading {
+      background: #24222b;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+      display: none;
+    }
 
-      * {
-        box-sizing: border-box;
+    .dcl-loading .loading {
+      display: flex;
+    }
+
+    .loading .logo {
+      background-image: url(images/progress-logo.png);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      width: 309px;
+      height: 58px;
+    }
+
+    .loading .progress {
+      position: absolute;
+      height: 35px;
+      width: 100%;
+      bottom: 0;
+      border-style: solid;
+      border-width: thick;
+      text-align: center;
+    }
+
+    .loading .progress .full {
+      float: left;
+      width: 0%;
+      height: 100%;
+      display: inline-flex;
+      background-color: #eb455a;
+      animation: progress_30 10s forwards;
+    }
+
+    @keyframes progress_30 {
+      from {
+        width: 0;
       }
 
-      body {
-        background: #e3e3e3;
-        color: #333;
-        font-family: 'open sans', roboto, 'helvetica neue', sans-serif;
-        font-size: 0.8em;
+      to {
+        width: 30%;
       }
+    }
 
-      .dcl-loading {
-        background: url(images/decentraland-loading.gif) center center no-repeat;
+    @keyframes progress_50 {
+      from {
+        width: 30%;
       }
 
-      canvas {
-        position: relative;
-        z-index: 1000;
-        width: 100%;
-        height: 100%;
+      to {
+        width: 50%;
       }
-    </style>
-  </head>
+    }
+  </style>
+</head>
 
-  <body class="dcl-loading">
-    <div id="gameContainer"></div>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-63691338-5"></script>
-    <script>
-      window.dataLayer = window.dataLayer || []
+<body class="dcl-loading">
+  <div class="loading">
+    <div class="logo"></div>
+    <div class="progress">
+      <div class="full"></div>
+    </div>
+  </div>
+  <div id="gameContainer"></div>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-63691338-5"></script>
+  <script>
+    window.dataLayer = window.dataLayer || []
 
-      function gtag() {
-        dataLayer.push(arguments)
-      }
-      gtag('js', new Date())
-      gtag('config', 'UA-63691338-5')
-    </script>
-
-    <script>
-      // prettier-ignore
-      !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";}}();
-    </script>
-  </body>
-  <script src="unity/Build/DCLUnityLoader.js"></script>
-  <script defer async src="dist/unity.js"></script>
-</html>
+    function gtag() {
+      dataLayer.push(arguments)
+    }
+    gtag('js', new Date())
+    gtag('config', 'UA-63691338-5')
+  </script>
+
+  <script>
+    // prettier-ignore
+    !function () { var analytics = window.analytics = window.analytics || []; if (!analytics.initialize) if (analytics.invoked) window.console && console.error && console.error("Segment snippet included twice."); else { analytics.invoked = !0; analytics.methods = ["trackSubmit", "trackClick", "trackLink", "trackForm", "pageview", "identify", "reset", "group", "track", "ready", "alias", "debug", "page", "once", "off", "on"]; analytics.factory = function (t) { return function () { var e = Array.prototype.slice.call(arguments); e.unshift(t); analytics.push(e); return analytics } }; for (var t = 0; t < analytics.methods.length; t++) { var e = analytics.methods[t]; analytics[e] = analytics.factory(e) } analytics.load = function (t, e) { var n = document.createElement("script"); n.type = "text/javascript"; n.async = !0; n.src = "https://cdn.segment.com/analytics.js/v1/" + t + "/analytics.min.js"; var a = document.getElementsByTagName("script")[0]; a.parentNode.insertBefore(n, a); analytics._loadOptions = e }; analytics.SNIPPET_VERSION = "4.1.0"; } }();
+  </script>
+</body>
+<script src="unity/Build/DCLUnityLoader.js"></script>
+<script defer async src="dist/unity.js"></script>
+
+</html>