From 8d911a4a9dfa586ba2ff724e48dbc92851e26ba9 Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Thu, 7 Mar 2013 13:14:16 -0500
Subject: [PATCH] styling loading state.

---
 css/app.css          |  21 ++++++++++++++++++---
 img/loader-black.gif | Bin 0 -> 1715 bytes
 js/id/ui/spinner.js  |   2 +-
 3 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 img/loader-black.gif

diff --git a/css/app.css b/css/app.css
index ead4f71a2..c11b105f3 100644
--- a/css/app.css
+++ b/css/app.css
@@ -25,7 +25,22 @@ body {
 }
 
 .spinner {
-    float: right;
+    opacity: .5;
+}
+
+.spinner img {
+    position: fixed;
+    padding: 5px;
+    height: 40px;
+    width: 40px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    margin: auto;
+    border-radius: 5px;
+    background: black;
+    pointer-events:none;
 }
 
 div, textarea, input, form, span, ul, li, ol, a, button {
@@ -1172,7 +1187,7 @@ img.tile {
     opacity: 1;
 }
 
-#about { 
+#about {
     height: 20px;
     text-align: right;
 }
@@ -1252,7 +1267,7 @@ div.typeahead a:first-child {
     z-index: 3;
 }
 
-.modal .loader { 
+.modal .loader {
     margin-bottom: 10px;
 }
 
diff --git a/img/loader-black.gif b/img/loader-black.gif
new file mode 100644
index 0000000000000000000000000000000000000000..08f0d7e346c26196d1dbdec9cb52fcf95951afb9
GIT binary patch
literal 1715
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

literal 0
HcmV?d00001

diff --git a/js/id/ui/spinner.js b/js/id/ui/spinner.js
index 733df565b..c567dd257 100644
--- a/js/id/ui/spinner.js
+++ b/js/id/ui/spinner.js
@@ -3,7 +3,7 @@ iD.ui.Spinner = function(context) {
 
     return function(selection) {
         var img = selection.append('img')
-            .attr('src', 'img/loader.gif')
+            .attr('src', 'img/loader-black.gif')
             .style('opacity', 0);
 
         connection.on('loading.spinner', function() {