topheman
diff --git a/‎www/index.html‎
Lines changed: 4 additions & 0 deletions b/‎www/index.html‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎www/style.css‎
Lines changed: 48 additions & 0 deletions b/‎www/style.css‎
Lines changed: 48 additions & 0 deletions
@@ -33,6 +33,10 @@
   <body>
     <button class="back-home-page" title="Back to home page">👋</button>
     <canvas id="bevy"></canvas>
+    <div class="text-center loader-wrapper">
+      <p>Loading ...</p>
+      <p><span class="loader"></span></p>
+    </div>
     <div id="orientationlock">Please lock your device in portrait mode to use this game.</div>
     <div id="presentation">
         <header>
 
@@ -146,3 +146,51 @@ qrcode-display {
       display: none;
   }
 }
+
+/** Loader for the game in the canvas */
+
+.loader-wrapper {
+  display: none;
+}
+
+.loader-wrapper .loader {
+  margin-left: -100px;
+}
+
+.playing .loader-wrapper {
+  display: block;
+}
+
+.loader {
+  position: relative;
+  width: 100px;
+  height: 16px;
+  margin: 0 auto;
+}
+.loader:before , .loader:after{
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #900000;
+  box-shadow: 32px 0 #900000;
+  left: 0;
+  top: 0;
+  animation: ballMoveX 1s linear infinite;
+}
+.loader:after {
+  box-shadow: none;
+  transform-origin: 40px 0;
+  transform: rotate(-153deg);
+  animation: rotateLoader 1s linear infinite;
+}
+
+@keyframes rotateLoader {
+  0% , 10%{ transform: rotate(-153deg); }
+  90%, 100% { transform: rotate(0deg); }
+}
+@keyframes ballMoveX {
+  0% , 10%{  transform: translateX(0) }
+  90%, 100% { transform: translateX(32px) }
+}