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'
}));
}
});