hella spinners

app/assets/javascripts/app/forms/picture_form.js

@@ -19,6 +19,7 @@ app.forms.Picture = app.views.Base.extend({
 
   submitForm : function (){
     this.$("form").submit();
+    this.$(".photos").append($('<span class="loader" style="margin-left: 80px;"></span>'))
   },
 
   photoUploaded : function(evt, xhr) {

app/assets/stylesheets/default.css

 /*
 *= require media-box
-*= require loader
 *= require lightbox
 *= require autocomplete
 *= require mentions

app/assets/stylesheets/loader.css.scss

-@-webkit-keyframes fade-in {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-@-webkit-keyframes spin {
-  0%   { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
-}
-
-@-moz-keyframes fade-in {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-@-moz-keyframes spin {
-  0%   { -moz-transform: rotate(0deg); }
-  100% { -moz-transform: rotate(360deg); }
-}
-
-.loaded {
-  -webkit-animation: fade-in 0.16s linear;
-  -moz-animation: fade-in 0.16s linear;
-}
-
-.loader {
-  -webkit-mask-image: image-url('static-loader.png');
-  -webkit-animation: spin 1s infinite ease-in-out,
-  fade-in 0.2s ease-in;
-  -moz-animation: spin 1s infinite ease-in-out,
-  fade-in 0.2s ease-in;
-}
-

app/assets/stylesheets/new_styles/_spinner.scss

+@-webkit-keyframes fade-in {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@-webkit-keyframes spin {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@-moz-keyframes fade-in {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@-moz-keyframes spin {
+  0%   { -moz-transform: rotate(0deg); }
+  100% { -moz-transform: rotate(360deg); }
+}
+
 #paginate, #infscr-loading {
   margin-top: 10px;
   padding: 8px 0;
@@ -5,17 +25,29 @@
   width: 100%;
   display: block;
   clear: both;
+}
+
+.loaded {
+  -webkit-animation: fade-in 0.16s linear;
+  -moz-animation: fade-in 0.16s linear;
+}
+
+.loader {
+  -webkit-mask-image: image-url('static-loader.png');
+  -webkit-animation: spin 1s infinite ease-in-out,
+  fade-in 0.2s ease-in;
+  -moz-animation: spin 1s infinite ease-in-out,
+  fade-in 0.2s ease-in;
 
-  .loader {
-    display: inline-block;
+  background-image : image-url("static-loader.png");
 
-    &.hidden{
-      display : none;
-    }
+  display: inline-block;
+  width : 14px;
+  height: 14px;
+  background-color: red;
 
-    width : 14px;
-    height: 14px;
-    background-image : url(asset_path("static-loader.png", "image"))
+  &.hidden{
+    display : none;
   }
 }