Use css spinner instead of gif

app/assets/javascripts/app/views/location_view.js

@@ -9,8 +9,8 @@ app.views.Location = Backbone.View.extend({
     this.getLocation();
   },
 
-  render: function(){
+  render: function() {
-    $("<img/>", { alt: "ajax-loader", src:  ImagePaths.get("ajax-loader2.gif") }).appendTo(this.el);
+    $("<div class=\"loader\"><div class=\"spinner\"></div></div>").appendTo(this.el);
   },
 
   getLocation: function(){

app/assets/javascripts/app/views/notification_dropdown_view.js

@@ -14,7 +14,7 @@ app.views.NotificationDropdown = app.views.Base.extend({
     this.badge = this.$el;
     this.dropdown = $("#notification-dropdown");
     this.dropdownNotifications = this.dropdown.find(".notifications");
-    this.ajaxLoader = this.dropdown.find(".ajax_loader");
+    this.ajaxLoader = this.dropdown.find(".ajax-loader");
     this.perfectScrollbarInitialized = false;
   },
 
@@ -86,9 +86,9 @@ app.views.NotificationDropdown = app.views.Base.extend({
 
   hideAjaxLoader: function(){
     var self = this;
-    this.ajaxLoader.find("img").fadeTo(200, 0, function(){
+    this.ajaxLoader.find(".spinner").fadeTo(200, 0, function(){
       self.ajaxLoader.hide(200, function(){
-        self.ajaxLoader.find("img").css("opacity", 1);
+        self.ajaxLoader.find(".spinner").css("opacity", 1);
       });
     });
   },

app/assets/javascripts/widgets/infinite-scroll.js

@@ -1,61 +0,0 @@
-// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
-
-/*   Copyright (c) 2010-2011, Diaspora Inc.  This file is
- *   licensed under the Affero General Public License version 3 or later.  See
- *   the COPYRIGHT file.
- */
-
-(function() {
-  var InfiniteScroll = function() {
-    var self = this;
-    this.options = {
-      bufferPx: 500,
-      debug: false,
-      donetext: Diaspora.I18n.t("infinite_scroll.no_more"),
-      loadingText: "",
-      loadingImg: ImagePaths.get("ajax-loader2.gif"),
-      navSelector: "#pagination",
-      nextSelector: ".paginate",
-      itemSelector: ".stream_element",
-      pathParse: function(pathStr) {
-        var newPath = pathStr.replace("?", "?only_posts=true&"),
-        	lastTime = $('#main_stream .stream_element').last().find(".time").attr("integer");
-
-        if(lastTime === undefined){
-        	lastTime = $('#main_stream').data('time_for_scroll');
-        }
-
-        return newPath.replace(/max_time=\d+/, "max_time=" + lastTime);
-      }
-    };
-
-    this.subscribe("widget/ready", function(evt, opts) {
-      $.extend(self.options, opts);
-      if($('#main_stream').length !== 0) {
-        $('#main_stream').infinitescroll(self.options, function(newElements) {
-          self.globalPublish("stream/scrolled", newElements);
-        });
-      } else if($('#people_stream').length !== 0) {
-        $("#people_stream").infinitescroll($.extend(self.options, {
-          navSelector  : ".pagination",
-          nextSelector : ".next_page",
-          pathParse : function(pathStr, nextPage) {
-            return pathStr.replace("page=2", "page=" + nextPage);
-          }
-        }), function(newElements) {
-          self.globalPublish("stream/scrolled", newElements);
-        });
-      }
-    });
-
-    this.reInitialize = function() {
-      $("#main_stream").infinitescroll("destroy");
-      self.publish("widget/ready");
-    };
-
-    this.globalSubscribe("stream/reloaded", self.reInitialize, this);
-  };
-
-  Diaspora.Widgets.InfiniteScroll = InfiniteScroll;
-})();
-// @license-end

app/assets/stylesheets/_application.scss

@@ -16,7 +16,7 @@
 @import 'hovercard';
 @import 'new_styles/base';
 @import 'new_styles/interactions';
-@import 'new_styles/spinner';
+@import 'spinner';
 @import 'lightbox';
 @import 'timeago';
 @import 'vendor/fileuploader';

app/assets/stylesheets/autocomplete.scss

@@ -42,9 +42,18 @@
   text-overflow: ellipsis;
 }
 
-.ac_loading {
+.ac_input + .spinner {
-  background: white image-url('ajax-loader2.gif') right 5px center no-repeat;
+  display: none;
-  background-size: 18px;
+}
+
+.ac_input.ac_loading + .spinner {
+  display: inline-block;
+  height: 18px;
+  margin-left: -26px;
+  margin-right: 8px;
+  margin-top: 7px;
+  position: absolute;
+  width: 18px;
 }
 
 .ac_odd {

app/assets/stylesheets/header.scss

@@ -58,9 +58,13 @@ header > .dark-header > nav {
           }
           & > .pull-right > .aspect_membership_dropdown { display: none; }
         }
-        .ajax_loader {
+        .ajax-loader {
           border-bottom: 1px solid $border-grey;
           padding: 10px;
+          .spinner {
+            height: 30px;
+            width: 30px;
+          }
         }
         .view_all {
           background-color: $link-color;

app/assets/stylesheets/new_styles/_animations.scss

@@ -1,7 +1,13 @@
 /* flash message animations - header height is about 50px */
 @keyframes expose {
-        0%   { top : -100px; }
+  0%   { top : -100px; }
-        15%  { top : 44px; }
+  15%  { top : 44px; }
-        85%  { top : 44px; }
+  85%  { top : 44px; }
-        100% { top : -100px; }
+  100% { top : -100px; }
+}
+
+/* spinner animation */
+@keyframes spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }

app/assets/stylesheets/new_styles/_spinner.scss

@@ -1,20 +0,0 @@
-#paginate, #infscr-loading {
-  margin-top: 10px;
-  padding: 8px 0;
-  text-align: center;
-  width: 100%;
-  display: block;
-  clear: both;
-}
-
-.loader {
-  background-image : image-url("ajax-loader2.gif");
-  display: inline-block;
-  width : 32px;
-  height: 32px;
-
-  &.hidden{
-    display : none;
-  }
-}
-

app/assets/stylesheets/publisher.scss

@@ -24,6 +24,7 @@
     #fileInfo { display: none !important; }
 
     #publisher_spinner {
+      margin: 20px;
       text-align: center;
     }
 
@@ -105,12 +106,20 @@
         }
       }
 
+      &.with_location .loader {
+        height: 20px;
+        width: 20px;
+      }
       &.with_location #location_container {
         height: 30px;
+        margin-bottom: 0;
         border-top: 1px dashed $border-grey;
         input[type='text'] {
-          margin-bottom: 0;
+          border: none;
           color: $text-grey;
+          height: 20px;
+          margin-bottom: 0;
+          padding: 0;
         }
       }
       &.active #button_container {

app/assets/stylesheets/spinner.scss

@@ -0,0 +1,28 @@
+#paginate, #infscr-loading {
+  margin-top: 10px;
+  padding: 8px 0;
+  text-align: center;
+  width: 100%;
+  display: block;
+  clear: both;
+}
+
+.loader {
+  display: inline-block;
+  width : 32px;
+  height: 32px;
+}
+
+.spinner {
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  border-radius: 50%;
+  border-width: 3px;
+  border-style: solid;
+  border-color: $border-dark-grey transparent $border-dark-grey $border-dark-grey;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-name: spinner;
+  animation-timing-function: linear;
+}

app/assets/stylesheets/vendor/autoSuggest.css

@@ -10,10 +10,6 @@ ul.as-selections {
   padding: 0;
 }
 
-ul.as-selections.loading {
-  background: asset_path("ajax-loader2.gif") right center no-repeat;
-}
-
 ul.as-selections li {
   float: left;
   margin: 1px 4px 1px 0;

app/assets/templates/header_tpl.jst.hbs

@@ -47,8 +47,8 @@
                   </h4>
                 </div>
                 <div class="notifications">
-                  <div class="ajax_loader">
+                  <div class="ajax-loader">
-                    <img class="img-responsive center-block" alt="Ajax-loader" src="{{imageUrl "ajax-loader2.gif"}}">
+                    <div class="spinner"></div>
                   </div>
                 </div>
                 <div class="view_all">
@@ -102,6 +102,7 @@
           <form id="header-search-form" accept-charset="UTF-8" action="/search" class="navbar-form navbar-right" role="search" method="get">
             <div class="form-group">
               <input id="q" name="q" placeholder="{{t "header.search"}}" results="5" type="search" autocomplete="off" class="ac_input form-control input-sm">
+              <div class="spinner"></div>
             </div>
             <input name="utf8" type="hidden" value="✓">
           </form>

app/views/aspects/_aspect_stream.haml

@@ -15,6 +15,7 @@
 
 #paginate
   %span.loader.hidden
+    .spinner
 
 - if current_user.contacts.size < 2
   = render 'aspects/no_contacts_message'

app/views/people/index.html.haml

@@ -25,8 +25,9 @@
               } );
 
             %p
-              = t('.searching')
+              = t(".searching")
-              = image_tag('ajax-loader2.gif', class: 'loader')
+              .loader
+                .spinner
           - else
             %p
               = t('.no_one_found')

app/views/people/show.html.haml

@@ -31,6 +31,7 @@
 
         #paginate
           %span.loader.hidden
+            .spinner
 
       %a{id:"back-to-top", title:"#{t('layouts.application.back_to_top')}", href:"#"}
         ⇧

app/views/publisher/_publisher.html.haml

@@ -48,7 +48,8 @@
           = hidden_field_tag 'aspect_ids[]', aspect_id.to_s
 
       #publisher_spinner{class: 'hidden'}
-        = image_tag 'ajax-loader2.gif'
+        .loader
+          .spinner
       .options_and_submit.col-sm-12
         .public_toggle
           .btn.btn-default.pull-left#hide_publisher{title: t('shared.publisher.discard_post')}

app/views/shared/_modal.haml

@@ -12,4 +12,6 @@
         %h3.modal-title{id: "#{id}Label"}
           = title
       .modal-body
-        = image_tag("ajax-loader2.gif", id: "modalWaiter", class: "img-responsive center-block")
+        #modalWaiter.text-center
+          .loader
+            .spinner

app/views/tags/show.haml

@@ -32,6 +32,7 @@
 
         #paginate
           %span.loader.hidden
+            .spinner
 
       %a{id:"back-to-top", title:"#{t('layouts.application.back_to_top')}", href:"#"}
         ⇧

app/views/users/getting_started.haml

@@ -24,7 +24,9 @@
               = label_tag 'profile[first_name]', t('profiles.edit.your_name')
               = text_field_tag 'profile[first_name]', current_user.first_name, class: "form-control"
             .form-group
-              = image_tag 'ajax-loader2.gif', id: "gs-name-form-spinner", class: "hidden"
+              #gs-name-form-spinner.hidden
+                .loader
+                  .spinner
               = label_tag :your_photo, t('profiles.edit.your_photo')
               = render 'photos/new_profile_photo', aspect: :getting_started, person: current_user.person