diff --git a/css/app.css b/css/app.css index 7f210c175..9632eba42 100644 --- a/css/app.css +++ b/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%; +} diff --git a/index.html b/index.html index 71eca28b3..264a14aeb 100755 --- a/index.html +++ b/index.html @@ -169,6 +169,7 @@ require(["dojo/dom-geometry","dojo/dom-class","dojo/on","dojo/dom","dojo/Evented +
Work in progress: introduction, code, docs. Imagery © 2012 Bing, GeoEye, Getmapping, Intermap, Microsoft.
diff --git a/js/iD/renderer/Map.js b/js/iD/renderer/Map.js index 0245b175c..6828e971f 100755 --- a/js/iD/renderer/Map.js +++ b/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;