Add a full screen modal processingIndicator

content/multipledataset.html

@@ -3,6 +3,7 @@ title: "Multiple dataset"
 date: 2019-09-27 16:41
 draft: false
 ---
+<link rel="stylesheet" type="text/css" href="/css/modal.css" />
 <script src="/js/data.js" type="text/javascript"></script>
 <script src="/js/loadAllData.js" type="text/javascript"></script>
 <script src="/js/getFullDataPath.js" type="text/javascript"></script>
@@ -326,4 +327,5 @@ draft: false
     </tbody>
     <div id="graph_div"></div>
   </table>
-</div>
+</div>
+<div class="modal"></div>

content/onedataset.html

@@ -3,6 +3,7 @@ title: "One dataset"
 date: 2019-08-29 09:00
 draft: false
 ---
+    <link rel="stylesheet" type="text/css" href="/css/modal.css" />
     <script src="/js/processingIndicator.js" type="text/javascript"></script>
     <script src="/js/data.js" type="text/javascript"></script>
     <script src="/js/loadAllData.js" type="text/javascript"></script>

static/css/modal.css

@@ -0,0 +1,30 @@
+/* Start by setting display:none to make this hidden.
+   Then we position it in relation to the viewport window
+   with position:fixed. Width, height, top and left speak
+   for themselves. Background we set to 80% white with
+   our animation centered, and no-repeating */
+   .modal {
+    display:    none;
+    position:   fixed;
+    z-index:    1000;
+    top:        0;
+    left:       0;
+    height:     100%;
+    width:      100%;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    background-color: rgba(255,255,255,.3);
+}
+
+/* When the body has the loading class, we turn
+   the scrollbar off with overflow:hidden */
+body.loading .modal {
+    overflow: hidden;
+}
+
+/* Anytime the body has the loading class, our
+   modal element will be visible */
+body.loading .modal {
+    display: block;
+    cursor: wait
+}

static/js/processingIndicator.js

@@ -1,14 +1,14 @@
 class processingIndicator{
   static get isActive(){
-    return document.body.style.cursor==="wait"
+    return document.body.classList.contains("loading")
   }
   static set isActive(value){
     if(value!=this.isActive){
       if(value){
-        document.body.style.cursor="wait"
+        document.body.classList.add("loading")
       }
       else{
-        document.body.style.cursor="default"
+        document.body.classList.remove("loading")
       }
     }
   }