Merge pull request #22 from iDataVisualizationLab/General

Update transition

Author: huyen-nguyen

.idea/workspace.xml

@@ -107,3 +107,24 @@ tr:last-child td:last-child { border-bottom-right-radius: 10px; }
     stroke-width: 1;
 }
 
+/* ------------- Spinner ------------ */
+#loading {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    position: fixed;
+    display: block;
+    /*opacity: 0.7;*/
+    background-color: #fff;
+    z-index: 99;
+    text-align: center;
+}
+
+#loading-image {
+    transition: all 0.8s;
+    position: absolute;
+    top: 100px;
+    left: 480px;
+    z-index: 100;
+}

css/main.css

@@ -14,6 +14,10 @@
 <div class="header">
     <a>Earthquake Situational Analytics</a>
 </div>
+<div id="loading">
+    <img id="loading-image" height="130" width="150"
+         src="images/spinnerResource.gif" alt="Loading..."/>
+</div>
 <div id="mainContent"></div>
 <script src="js/source.js"></script>
 <script src="lib/wordstream.js"></script>

images/spinnerEvent.gif

@@ -88,7 +88,7 @@ function loadData(){
                 .style("opacity", 0);
             current = initTimestamp;
             updateWindow(current);
-
+            d3.select('#loading').remove();
         }
     });
 }