Add HTML and CSS for a loading indicator

index.html

@@ -178,6 +178,10 @@
                       <br /> -->
                     </div>
                     <div id="cesiumGlobeContainer"></div>
+                    <!-- This div is empty; we use it for the loading indicator -->
+                    <div id="loadingIndicator" class="cover">
+                      <div id="loadingIcon" class="loadingIndicator"></div>
+                    </div>
                   </div>
                 </div>
               </div>

public/css/stylesCustom.css

@@ -36,3 +36,28 @@
 .hidden {
   visibility: hidden;
 }
+
+.loadingIndicator {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -33px;
+  margin-left: -33px;
+  width: 66px;
+  height: 66px;
+  background: url(../images/ajax-loader.gif) center no-repeat;
+}
+
+.cover {
+  display: none;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.75);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  /* value should be larger than that for our custom toolbar so that it is drawn on top of it*/
+  z-index: 15;
+}