Add animated progress indicator

imgs/progress_0.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11mm"
+   height="2.9990361mm"
+   viewBox="0 0 11 2.9990361"
+   version="1.1"
+   id="svg7190"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs7187" />
+  <path
+     id="rect1228"
+     style="fill:#000000;stroke-width:29.8546"
+     d="M 0.00390625,0 V 11.328125 H 11.292969 V 0 Z M 1.5039062,1.5058594 H 9.7929688 V 9.8222656 H 1.5039062 Z"
+     transform="scale(0.26458333)" />
+  <rect
+     style="fill:#000000;stroke-width:3.89814"
+     id="rect1441"
+     width="1.4740258"
+     height="1.4791262"
+     x="0.75746959"
+     y="0.75905323" />
+  <rect
+     style="fill:#000000;stroke-width:3.89814"
+     id="rect1470"
+     width="1.4740258"
+     height="1.4791262"
+     x="4.7448192"
+     y="0.75905323" />
+  <rect
+     style="fill:#000000;stroke-width:3.89814"
+     id="rect1476"
+     width="1.4740258"
+     height="1.4791262"
+     x="8.7282362"
+     y="0.75905305" />
+</svg>

imgs/progress_1.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11mm"
+   height="2.9990361mm"
+   viewBox="0 0 11 2.9990361"
+   version="1.1"
+   id="svg7190"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs7187" />
+  <path
+     id="rect1228"
+     style="fill:#000000;stroke-width:7.89903"
+     d="M 3.988386,0 V 2.997233 H 6.9752838 V 0 Z M 4.385261,0.39842529 H 6.5784088 V 2.5988077 H 4.385261 Z" />
+  <rect
+     style="fill:#000000;stroke-width:3.89814"
+     id="rect1441"
+     width="1.4740258"
+     height="1.4791262"
+     x="0.75746959"
+     y="0.75905323" />
+  <rect
+     style="fill:#000000;stroke-width:3.89814"
+     id="rect1470"
+     width="1.4740258"
+     height="1.4791262"
+     x="4.7448192"
+     y="0.75905323" />
+  <rect
+     style="fill:#000000;stroke-width:3.89814"
+     id="rect1476"
+     width="1.4740258"
+     height="1.4791262"
+     x="8.7282362"
+     y="0.75905305" />
+</svg>

imgs/progress_2.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11mm"
+   height="2.9990361mm"
+   viewBox="0 0 11 2.9990361"
+   version="1.1"
+   id="svg7190"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs7187" />
+  <path
+     id="rect1228"
+     style="fill:#000000;stroke-width:7.89903"
+     d="M 7.9735393,0 V 2.997233 H 10.96046 V 0 Z m 0.396875,0.39842529 H 10.563585 V 2.5988077 H 8.3704143 Z" />
+  <rect
+     style="fill:#000000;stroke-width:3.89814"
+     id="rect1441"
+     width="1.4740258"
+     height="1.4791262"
+     x="0.75746959"
+     y="0.75905323" />
+  <rect
+     style="fill:#000000;stroke-width:3.89814"
+     id="rect1470"
+     width="1.4740258"
+     height="1.4791262"
+     x="4.7448192"
+     y="0.75905323" />
+  <rect
+     style="fill:#000000;stroke-width:3.89814"
+     id="rect1476"
+     width="1.4740258"
+     height="1.4791262"
+     x="8.7282362"
+     y="0.75905305" />
+</svg>

index.html

@@ -886,11 +886,10 @@ function init_all() {
     loadingElem.style.textAlign = 'center';
 
     if (WATNA_PRELOAD_ABZ) {
-      const spinners = [ '◴', '◷', '◶', '◵' ];
       const anim = setInterval(() => {
-        let txt = `Viewer is initializing ${Math.floor(percentLoaded + 0.5)} % <span class="w3-large">${spinners[ctr]}</span>`;
+        let txt = `Viewer is initializing ${Math.floor(percentLoaded + 0.5)} % <img src="imgs/progress_${ctr}.svg" />`;
 
-        ctr = ++ctr % 4;
+        ctr = ++ctr % 3;
         loadingElem.innerHTML = txt;
       }, 150);