diff --git a/src/UI/Content/icons.less b/src/UI/Content/icons.less
index a694200e5..6b47430da 100644
--- a/src/UI/Content/icons.less
+++ b/src/UI/Content/icons.less
@@ -72,7 +72,31 @@
.icon-sonarr-spinner {
.fa-icon-content(@fa-var-spinner);
- margin: 0px -0.14em;
+}
+
+.fa-spin-overlay {
+ .fa-icon();
+ position : relative;
+ text-align : center;
+ vertical-align : baseline;
+
+ i {
+ opacity : 0.2;
+
+ &.icon-sonarr-spinner {
+ opacity : 1.0;
+ }
+ }
+
+ span {
+ position : absolute;
+ top : 0;
+ left : 0;
+ right : 0;
+ bottom : 0;
+
+ margin : 0 -0.5em;
+ }
}
.icon-sonarr-rename {
diff --git a/src/UI/Settings/Quality/quality.less b/src/UI/Settings/Quality/quality.less
index bd0fb4d16..23732cdfd 100644
--- a/src/UI/Settings/Quality/quality.less
+++ b/src/UI/Settings/Quality/quality.less
@@ -1,5 +1,5 @@
@import "../../Content/Bootstrap/mixins";
-@import "../../Content/icons";
+@import (reference) "../../Content/icons";
@import "../../Shared/Styles/clickable.less";
ul.qualities {
diff --git a/src/UI/jQuery/jquery.spin.js b/src/UI/jQuery/jquery.spin.js
index 3875ccbe0..5df52a958 100644
--- a/src/UI/jQuery/jquery.spin.js
+++ b/src/UI/jQuery/jquery.spin.js
@@ -25,7 +25,7 @@ module.exports = function() {
var iconClasses = icon.attr('class').match(/(?:^|\s)icon\-.+?(?:$|\s)/);
- if (iconClasses.length === 0) {
+ if (!iconClasses || iconClasses.length === 0) {
return this;
}
@@ -38,7 +38,8 @@ module.exports = function() {
} else {
icon.attr('data-idle-icon', iconClass);
icon.removeClass(iconClass);
- icon.addClass('fa-spin icon-sonarr-spinner');
+ icon.addClass('fa-spin-overlay');
+ icon.html('');
}
return this;
@@ -47,8 +48,9 @@ module.exports = function() {
$.fn.stopSpin = function() {
var icon = this.find('i').andSelf('i');
+ icon.empty();
this.removeClass('disabled');
- icon.removeClass('fa-spin icon-sonarr-spinner');
+ icon.removeClass('fa-spin fa-spin-overlay');
var idleIcon = icon.attr('data-idle-icon');
if (idleIcon) {