diff --git a/index.html b/index.html
index d0974a6765c3e6f5da9563948b3a14b2e95c8f2b..cb19eb422f9b32a40f23c35d41bafef6a600799a 100644
--- a/index.html
+++ b/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>
diff --git a/public/css/stylesCustom.css b/public/css/stylesCustom.css
index e3cbb70e145be5f04df847cd2b63d78bdd083610..aecb27eb3cf5beab9a5782c29e7814763294ed8b 100644
--- a/public/css/stylesCustom.css
+++ b/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;
+}
diff --git a/public/images/ajax-loader.gif b/public/images/ajax-loader.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9b92efe0fa2cb697be67dfcf6797d87ce8a5a29f
Binary files /dev/null and b/public/images/ajax-loader.gif differ