Spinner

css/app.css

@@ -214,3 +214,47 @@ polyline {
     color: #888;
     font: normal 11px/15px Helvetica, Arial, sans-serif;
 }
+
+#progress {
+    position:absolute;
+    left:50%;
+    top:300px;
+    color:#fff;
+    z-index:999;
+    width:100px;
+    margin-left:-50px;
+    text-align:center;
+    font-size:100px;
+    display:none;
+    font-weight:bold;
+}
+@-webkit-keyframes spinnerAnim {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@-moz-keyframes spinnerAnim {
+  0% { -moz-transform: rotate(0deg); }
+  100% { -moz-transform: rotate(360deg); }
+}
+@-ms-keyframes spinnerAnim {
+  0% { -ms-transform: rotate(0deg); }
+  100% { -ms-transform: rotate(360deg); }
+}
+@-o-keyframes spinnerAnim {
+  0% { -o-transform: rotate(0deg); }
+  100% { -o-transform: rotate(360deg); }
+}
+.spinner {
+  -webkit-animation-fill-mode: both;
+  -webkit-animation: spinnerAnim 1.5s infinite linear;
+  -webkit-transform-origin: 50% 50%;
+  -moz-animation-fill-mode: both;
+  -moz-animation: spinnerAnim 1.5s infinite linear;
+  -moz-transform-origin: 50% 50%;
+  -ms-animation-fill-mode: both;
+  -ms-animation: spinnerAnim 1.5s infinite linear;
+  -ms-transform-origin: 50% 50%;
+  -o-animation-fill-mode: both;
+  -o-animation: spinnerAnim 1.5s infinite linear;
+  -o-transform-origin: 50% 50%;
+}

index.html

@@ -169,6 +169,7 @@ require(["dojo/dom-geometry","dojo/dom-class","dojo/on","dojo/dom","dojo/Evented
 
 <!-- Map div -->
 
+<div id='progress'>↻</div>
 <div id="map"></div>
 <p>Work in progress: <a href='http://www.geowiki.com/'>introduction</a>, <a href='http://github.com/systemed/iD'>code</a>, <a href='http://www.geowiki.com/docs'>docs</a>. Imagery <a href="http://opengeodata.org/microsoft-imagery-details">&copy; 2012</a> Bing, GeoEye, Getmapping, Intermap, Microsoft.</p>
 

js/iD/renderer/Map.js

@@ -224,6 +224,7 @@ declare("iD.renderer.Map", null, {
 
     download:function() {
         // summary:		Ask the connection to download data for the current viewport.
+        $('#progress').show().addClass('spinner');
         this.conn.loadFromAPI(this.extent, _.bind(this.updateUIs, this));
     },
 
@@ -231,6 +232,7 @@ declare("iD.renderer.Map", null, {
 		// summary:		Draw/refresh all EntityUIs within the bbox, and remove any others.
 		// redraw: Boolean	Should we redraw any UIs that are already present?
 		// remove: Boolean	Should we delete any UIs that are no longer in the bbox?
+        $('#progress').hide().removeClass('spinner');
 
 		var m = this;
 		var way, poi;