diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index d164220ee..41c04bf72 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -17,6 +17,26 @@ %link{:rel => 'shortcut icon', :href => '/favicon.png'} %link{:rel => 'apple-touch-icon', :href => '/apple-touch-icon.png'} + :css + @-webkit-keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + + @-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } + } + + .loaded { + -webkit-animation: fade-in 0.16s linear; + } + + .loader { + -webkit-animation: spin 1s infinite ease-in-out, + fade-in 0.2s ease-in; + } + / Social Media Icons are by Paul Robert Lloyd @ http://paulrobertlloyd.com/2009/06/social_media_icons / bootstrap/blueprint switch diff --git a/public/images/static-loader.png b/public/images/static-loader.png new file mode 100644 index 000000000..c0dfc4075 Binary files /dev/null and b/public/images/static-loader.png differ diff --git a/public/javascripts/app/views/stream_object_view.js b/public/javascripts/app/views/stream_object_view.js index c8ec672bf..2d1a0575f 100644 --- a/public/javascripts/app/views/stream_object_view.js +++ b/public/javascripts/app/views/stream_object_view.js @@ -1,4 +1,7 @@ App.Views.StreamObject = Backbone.View.extend({ + + className : "loaded", + initialize: function(options) { this.model.bind('remove', this.remove, this); this.model.bind('change', this.render, this); diff --git a/public/javascripts/app/views/stream_view.js b/public/javascripts/app/views/stream_view.js index bb072ca70..7217056a8 100644 --- a/public/javascripts/app/views/stream_view.js +++ b/public/javascripts/app/views/stream_view.js @@ -26,7 +26,7 @@ App.Views.Stream = Backbone.View.extend({ href: this.collection.url(), id: "paginate", "class": "paginate" - }).text('more')); + }).text('Load more posts')); }, loadMore: function(evt) { @@ -42,7 +42,8 @@ App.Views.Stream = Backbone.View.extend({ addLoader: function(){ this.$("#paginate").html($("", { - src : "/images/ajax-loader.gif" + src : "/images/static-loader.png", + "class" : 'loader' })); } });