Replace gif animation with font icon spinner

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

23 files changed, 44 insertions, 38 deletions

diff --git a/app/assets/images/ajax_loader.gif b/app/assets/images/ajax_loader.gif
deleted file mode 100644
index d0f093033d6..00000000000
--- a/app/assets/images/ajax_loader.gif
+++ /dev/null
diff --git a/app/assets/images/ajax_loader_gray.gif b/app/assets/images/ajax_loader_gray.gif
deleted file mode 100644
index fdf2c98a961..00000000000
--- a/app/assets/images/ajax_loader_gray.gif
+++ /dev/null
diff --git a/app/assets/images/ajax_loader_tree.gif b/app/assets/images/ajax_loader_tree.gif
deleted file mode 100644
index 47ba01264ce..00000000000
--- a/app/assets/images/ajax_loader_tree.gif
+++ /dev/null
diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss
index 507e7197d5f..4824194ec42 100644
--- a/app/assets/stylesheets/generic/common.scss
+++ b/app/assets/stylesheets/generic/common.scss
@@ -173,12 +173,10 @@ table a code {
 
 .loading {
   margin: 20px auto;
-  background: url(ajax_loader.gif) no-repeat center center;
-  width: 40px;
   height: 40px;
-  &.loading-gray {
-    background: url(ajax_loader_gray.gif) no-repeat center center;
-  }
+  color: #555;
+  font-size: 32px;
+  text-align: center;
 }
 
 span.update-author {
diff --git a/app/assets/stylesheets/sections/projects.scss b/app/assets/stylesheets/sections/projects.scss
index 178364835ae..5757858a1ce 100644
--- a/app/assets/stylesheets/sections/projects.scss
+++ b/app/assets/stylesheets/sections/projects.scss
@@ -123,14 +123,9 @@
 }
 
 .save-project-loader {
-  img {
-    margin-top: 50px;
-    margin-bottom: 50px;
-  }
-  h3 {
-    @extend .page-title;
-  }
-
+  margin-top: 50px;
+  margin-bottom: 50px;
+  color: #555;
 }
 
 ul.nav.nav-projects-tabs {
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 2f5f3b99cbb..1550e8b7e05 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -236,4 +236,10 @@ module ApplicationHelper
   def render_markup(file_name, file_content)
     GitHub::Markup.render(file_name, file_content).html_safe
   end
+
+  def spinner(text = nil)
+    content_tag :div, class: 'loading hide' do
+      content_tag(:i, nil, class: 'icon-spinner icon-spin') + text
+    end
+  end
 end
diff --git a/app/views/dashboard/_activities.html.haml b/app/views/dashboard/_activities.html.haml
index 89117726317..39dd600dba3 100644
--- a/app/views/dashboard/_activities.html.haml
+++ b/app/views/dashboard/_activities.html.haml
@@ -5,4 +5,5 @@
   .content_list
 - else
   %p.nothing_here_message Projects activity will be displayed here
-.loading.hide
+
+= spinner
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index 6780010031e..6256c047929 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -11,7 +11,7 @@
       .content_list
     - else
       %p.nothing_here_message Project activity will be displayed here
-    .loading.hide
+    = spinner
   .side.col-md-4
     .light-well.append-bottom-20
       = image_tag group_icon(@group.path), class: "avatar s90"
diff --git a/app/views/layouts/_head_panel.html.haml b/app/views/layouts/_head_panel.html.haml
index 32debb8c7ac..b41a8a278d7 100644
--- a/app/views/layouts/_head_panel.html.haml
+++ b/app/views/layouts/_head_panel.html.haml
@@ -17,7 +17,7 @@
           %li.hidden-sm.hidden-xs
             %a
               %div.hide.turbolink-spinner
-                %i.icon-refresh.icon-spin
+                %i.icon-spinner.icon-spin
                 Loading...
           %li.hidden-sm.hidden-xs
             = render "layouts/search"
diff --git a/app/views/layouts/_public_head_panel.html.haml b/app/views/layouts/_public_head_panel.html.haml
index 7d188fb28e4..949d6abdf1c 100644
--- a/app/views/layouts/_public_head_panel.html.haml
+++ b/app/views/layouts/_public_head_panel.html.haml
@@ -19,5 +19,5 @@
         %li
           %a
             %div.hide.turbolink-spinner
-              %i.icon-refresh.icon-spin
+              %i.icon-spinner.icon-spin
               Loading...
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 3220736b078..c60e1ca9297 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -50,7 +50,10 @@
         %div
           = f.text_field :username, required: true, class: 'form-control'
            
-          %span.loading-gif.hide= image_tag "ajax_loader.gif"
+        .loading-gif.hide
+          %p
+            %i.icon-spinner.icon-spin
+            Saving new username
         %p.light
           = user_url(@user)
         %div
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 723c5a1c340..3a4f304a255 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -9,7 +9,7 @@
 %div{id: dom_id(@project)}
   #commits-list= render "commits"
 .clear
-.loading{ style: "display:none;"}
+= spinner
 
 - if @commits.count == @limit
   :javascript
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 79234fe4fa9..b9cd5a20d50 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -189,6 +189,7 @@
 
 .save-project-loader.hide
   %center
-    = image_tag "ajax_loader.gif"
-    %h3 Saving project.
+    %h2
+      %i.icon-spinner.icon-spin
+      Saving project.
     %p Please wait a moment, this page will automatically refresh when ready.
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index eae4949fcd3..489b9b0e951 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -3,8 +3,9 @@
 - if @project.import? && !@project.imported
   .save-project-loader
     %center
-      = image_tag "ajax_loader.gif"
-      %h3 Importing repository.
+      %h2
+        %i.icon-spinner.icon-spin
+        Importing repository.
       %p.monospace git clone --bare #{@project.import_url}
       %p Please wait while we import the repository for you. Refresh at will.
       :javascript
diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml
index a21cb9e7861..27348232ba2 100644
--- a/app/views/projects/graphs/show.html.haml
+++ b/app/views/projects/graphs/show.html.haml
@@ -1,7 +1,8 @@
 .loading-graph
   %center
-    .loading
-    %h3.page-title Building repository graph.
+    %h3.page-title
+      %i.icon-spinner.icon-spin
+      Building repository graph.
     %p Please wait a moment, this page will automatically refresh when ready.
 
 .stat-graph
diff --git a/app/views/projects/merge_requests/show/_mr_accept.html.haml b/app/views/projects/merge_requests/show/_mr_accept.html.haml
index 352d843f49f..83f2db03b18 100644
--- a/app/views/projects/merge_requests/show/_mr_accept.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_accept.html.haml
@@ -55,7 +55,7 @@
   .automerge_widget.unchecked
     .bs-callout.bs-callout-warning
       %strong
-        %i.icon-refresh.icon-spin
+        %i.icon-spinner.icon-spin
         Checking for ability to automatically merge…
 
   .automerge_widget.already_cannot_be_merged.hide
@@ -64,6 +64,6 @@
 
   .merge-in-progress.hide
     .bs-callout.bs-callout-success
-      %i.icon-refresh.icon-spin
+      %i.icon-spinner.icon-spin
        
       Merge is in progress. Please wait. Page will be automatically reloaded.  
diff --git a/app/views/projects/merge_requests/show/_mr_ci.html.haml b/app/views/projects/merge_requests/show/_mr_ci.html.haml
index 2e923ec5f35..915d24dd021 100644
--- a/app/views/projects/merge_requests/show/_mr_ci.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_ci.html.haml
@@ -25,7 +25,7 @@
   .ci_widget
     .alert.alert-warning
       %strong
-        %i.icon-refresh
+        %i.icon-spinner
         Checking for CI status for #{@merge_request.last_commit_short_sha}
 
   .ci_widget.ci-error{style: "display:none"}
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index 492f77341f7..da0cfa84c2d 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -3,7 +3,7 @@
   .tip
     You can move around the graph by using the arrow keys.
   .network-graph
-    .loading.loading-gray
+    = spinner
 
 :javascript
   new Network({
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index f21cef6f2e3..9ee54fef062 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -62,6 +62,7 @@
 
 .save-project-loader.hide
   %center
-    = image_tag "ajax_loader.gif"
-    %h3 Creating project & repository.
+    %h2
+      %i.icon-spinner.icon-spin
+      Creating project & repository.
     %p Please wait a moment, this page will automatically refresh when ready.
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index 59075abf984..32a42916bd6 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -5,7 +5,7 @@
     = render "events/event_last_push", event: @last_push
     = render 'shared/event_filter'
     .content_list
-    .loading.hide
+    = spinner
   .col-md-3.project-side.hidden-sm
     .clearfix
       - if @project.archived?
diff --git a/app/views/projects/tree/_blob_item.html.haml b/app/views/projects/tree/_blob_item.html.haml
index 92dfd7537ca..6fee604b554 100644
--- a/app/views/projects/tree/_blob_item.html.haml
+++ b/app/views/projects/tree/_blob_item.html.haml
@@ -4,7 +4,5 @@
     %span.str-truncated
       = link_to blob_item.name, project_blob_path(@project, tree_join(@id || @commit.id, blob_item.name))
   %td.tree_time_ago.cgray
-    %span.log_loading.hide
-      Loading commit data...
-      = image_tag "ajax_loader_tree.gif", width: 14
+    = render 'spinner'
   %td.tree_commit{ colspan: 2 }
diff --git a/app/views/projects/tree/_spinner.html.haml b/app/views/projects/tree/_spinner.html.haml
new file mode 100644
index 00000000000..5a9e77b63df
--- /dev/null
+++ b/app/views/projects/tree/_spinner.html.haml
@@ -0,0 +1,3 @@
+%span.log_loading.hide
+  %i.icon-spinner.icon-spin
+  Loading commit data...
diff --git a/app/views/projects/tree/_tree_item.html.haml b/app/views/projects/tree/_tree_item.html.haml
index b4dd6f48b62..1b3900bcbae 100644
--- a/app/views/projects/tree/_tree_item.html.haml
+++ b/app/views/projects/tree/_tree_item.html.haml
@@ -4,7 +4,5 @@
     %span.str-truncated
       = link_to tree_item.name, project_tree_path(@project, tree_join(@id || @commit.id, tree_item.name))
   %td.tree_time_ago.cgray
-    %span.log_loading.hide
-      Loading commit data...
-      = image_tag "ajax_loader_tree.gif", width: 14
+    = render 'spinner'
   %td.tree_commit{ colspan: 2 }