diff --git a/images/loader.gif b/images/loader.gif new file mode 100644 index 0000000..fd1a189 Binary files /dev/null and b/images/loader.gif differ diff --git a/index.html b/index.html index 4818294..05df610 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@ -
+

Tube Status

@@ -57,5 +57,9 @@
+
+   +
+ diff --git a/javascripts/views/main.js b/javascripts/views/main.js index b4c4f41..81087fa 100644 --- a/javascripts/views/main.js +++ b/javascripts/views/main.js @@ -12,9 +12,9 @@ function(Backbone) { initialize: function() { this.collection.on("request", function() { - // $.mobile.loading('show'); + $('#loader').show(); }).on("reset", function() { - // $.mobile.loading('hide'); + $('#loader').hide(); }); }, @@ -29,7 +29,7 @@ function(Backbone) { $('footer a').removeClass("selected"); $(e.currentTarget).addClass("selected"); this.collection.fetch(); - } + }, }); diff --git a/stylesheets/main.css b/stylesheets/main.css index 27b4fbd..a66af72 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -51,6 +51,18 @@ body { margin: 0; font-family: "Helvetica Neue", "Arial", sans-serif; } +#loader { + position: absolute; + top: 45%; + left: 50%; + width: 52px; + height: 52px; + margin: -26px 0 0 -26px; + background: black url(/images/loader.gif) center center no-repeat; + border-radius: 26px; + opacity: 0.5; + display: none; } + header { position: fixed; width: 100%; diff --git a/stylesheets/main.scss b/stylesheets/main.scss index 987c63a..33952c1 100644 --- a/stylesheets/main.scss +++ b/stylesheets/main.scss @@ -15,6 +15,20 @@ body { margin: 0; font-family: "Helvetica Neue", "Arial", sans-serif; } + +#loader { + position: absolute; + top: 45%; + left: 50%; + width: 52px; + height: 52px; + margin: -26px 0 0 -26px; + background: black url(/images/loader.gif) center center no-repeat; + border-radius: 26px; + opacity: 0.5; + display: none; +} + header { position: fixed; width: 100%;