Add very basic loadmask

2017-11-15 20:41:46 +01:00
parent 8c944271d0
commit bdbb526ff2
3 changed files with 24 additions and 5 deletions
@@ -3,7 +3,7 @@
  <head>
    <title>TODO</title>
    <meta charset="UTF-8">
-    <link type="style/css" href="style/main.css">
+    <link rel="stylesheet" type="text/css" href="style/main.css">
    <script type="text/javascript" src="js/d3/d3.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </head>
@@ -14,5 +14,9 @@
      Charset ist UTF-8.<br>
      TODO
    </p>
+    <div id="loadmask">
+      Arbeite ... bitte warten.
+    </div>
+
  </body>
 </html>
@@ -158,6 +158,9 @@ d3.queue()
    // All data loaded by the deferred functions, now we're ready for business
    // (call more functions :D)
    console.log("All done. Ready.");
+    // Throw errors so we can see them
    if(error) throw error;
+    // Hide the loadmask
+    d3.select("#loadmask").style("display", "none");
  });

@@ -1,4 +1,16 @@
-html, body {
-  margin: 0;
-  padding: 0;
-}
+html, body, * {
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+}
+
+#loadmask {
+  z-index: 100;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  padding: 15px;
+  border: 2px solid #AAAAAA;
+  background-color: #999999;
+  color: #000000;
+}