diff --git a/app/assets/images/ajax_loader.gif b/app/assets/images/ajax_loader.gif
deleted file mode 100644
index d0f093033d68cee818281f6acd77b0368dcb7ede..0000000000000000000000000000000000000000
Binary files a/app/assets/images/ajax_loader.gif and /dev/null differ
diff --git a/app/assets/images/ajax_loader_gray.gif b/app/assets/images/ajax_loader_gray.gif
deleted file mode 100644
index fdf2c98a961c3e545ad93c1e75d4d022c9ca6f30..0000000000000000000000000000000000000000
Binary files a/app/assets/images/ajax_loader_gray.gif and /dev/null differ
diff --git a/app/assets/images/ajax_loader_tree.gif b/app/assets/images/ajax_loader_tree.gif
deleted file mode 100644
index 47ba01264cea994062dc6b588d4fd9c993c464ac..0000000000000000000000000000000000000000
Binary files a/app/assets/images/ajax_loader_tree.gif and /dev/null differ
diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss
index 507e7197d5ff0d2373a1e66f1138f8b3931c8dbf..4824194ec420a75e190e58a827016fddd92c8226 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/header.scss b/app/assets/stylesheets/sections/header.scss
index 780f281dd7e37b15084a95c250832c2cbdc0df4e..96b7062ff2bfe9180b0671608b5b54a547243452 100644
--- a/app/assets/stylesheets/sections/header.scss
+++ b/app/assets/stylesheets/sections/header.scss
@@ -196,6 +196,8 @@ header {
.turbolink-spinner {
color: #FFF;
+ font-size: 22px;
+ margin-right: 10px;
}
.search {
diff --git a/app/assets/stylesheets/sections/projects.scss b/app/assets/stylesheets/sections/projects.scss
index 178364835aef38eb306dfa47c3585cf17020c362..5757858a1ce28f191bdf601a3f9547d4e2b9792d 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 2f5f3b99cbb986e171dd70c9ca620784f5e2e9c6..1550e8b7e056cbe70520900ebd97372d631fdad2 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 891177263173f01ac8e38a598084d0998c8714df..39dd600dba3168b9e594fe208ccdbb0b5e712ab2 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 6780010031e46b2a35940cfea8988b9f019fb35d..6256c047929b53704ab5eba6777ca014024d3d64 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 32debb8c7ac6ba6e9e3e8bc57b39cbda6f35e508..1d181d3519c9f31504c23798702df42b7029d098 100644
--- a/app/views/layouts/_head_panel.html.haml
+++ b/app/views/layouts/_head_panel.html.haml
@@ -18,7 +18,6 @@
%a
%div.hide.turbolink-spinner
%i.icon-refresh.icon-spin
- Loading...
%li.hidden-sm.hidden-xs
= render "layouts/search"
%li.visible-sm.visible-xs
diff --git a/app/views/layouts/_public_head_panel.html.haml b/app/views/layouts/_public_head_panel.html.haml
index 7d188fb28e46dd6a7f3e6bdab8df3acbc87ff56c..65c806a915fd46e9a0c77bc2cd1e17e47df67894 100644
--- a/app/views/layouts/_public_head_panel.html.haml
+++ b/app/views/layouts/_public_head_panel.html.haml
@@ -20,4 +20,3 @@
%a
%div.hide.turbolink-spinner
%i.icon-refresh.icon-spin
- Loading...
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 3220736b078d6c0dbe918f80e6b37300b489d320..c60e1ca9297463bc9b00141dd40aa1b5307cd2cb 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 723c5a1c34077d2e889ad21414da7257c91c5a0a..3a4f304a2554a62470487c2dd447c93e5620204c 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 79234fe4fa99c2b4466999167c56dac5796b0dde..b9cd5a20d50e9b444bd62468eae71779a78f3d9d 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 eae4949fcd3028c3c06e407a30b962834864c7a7..489b9b0e951b5c8715e507e62db1533582f46ef7 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 a21cb9e7861a2607d1681b49aa5bc60a4cbe4f28..27348232ba23f5f0df5afd94aefebc77b7744770 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 352d843f49fb0082ec434cec5d27d908e4a606d7..83f2db03b185b531515d751832b6cc16cbd7994e 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 2e923ec5f35c2b4ed69e59dee512fb31ca73498c..915d24dd021a32203ce8066c3c52e86faed9124c 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 492f77341f7592abd490e369ea4d536260f9a222..da0cfa84c2d2f31c7d3bfd10ae3dc5fd55b02f64 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 f21cef6f2e30885b57cb02c175100383ed248fb9..9ee54fef062a69816a88d4cede7c6bb4861e49ba 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 59075abf98410f9e88befe74e340b768c5884927..32a42916bd652d3c3ad4da47b82ded502a788712 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 92dfd7537ca8f9046c6ec5d4494f6343c95d90a5..6fee604b554d576042d3a98c9e53e5123339b4cf 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 0000000000000000000000000000000000000000..5a9e77b63df05e7cb7012de90773e0b69d1122fa
--- /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 b4dd6f48b62e7e72d9fc5f21d0b9bc61f53dada4..1b3900bcbae8b7e03c82c074b598b9906425c885 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 }