slightly fade in stream elements; made a better spinner for the stream (css3)

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

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

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($("<img>", {
-      src : "/images/ajax-loader.gif"
+      src : "/images/static-loader.png",
+      "class" : 'loader'
     }));
   }
 });