New animated loader

3 files changed, 87 insertions, 11 deletions

diff --git a/core/css/header.css b/core/css/header.css
index af4bbac57a5..d3e9e7cd490 100644
--- a/core/css/header.css
+++ b/core/css/header.css
@@ -294,7 +294,7 @@
 	color: #bbb;
 	cursor: pointer;
 }
-#settings .icon-loading-dark {
+#settings .icon-loading-small-dark {
 	display: inline-block;
 	margin-bottom: -3px;
 	margin-right: 6px;
diff --git a/core/css/icons.css b/core/css/icons.css
index 8caeaf0b475..8bf4c204c94 100644
--- a/core/css/icons.css
+++ b/core/css/icons.css
@@ -14,15 +14,93 @@
 	background-image: url('../img/breadcrumb.svg');
 }
 
-.icon-loading {
-	background-image: url('../img/loading.gif');
-}
-.icon-loading-dark {
-	background-image: url('../img/loading-dark.gif');
-}
-.icon-loading-small {
-	background-image: url('../img/loading-small.gif');
+.loading,
+.loading-small,
+.icon-loading,
+.icon-loading-dark,
+.icon-loading-small,
+.icon-loading-small-dark {
+	position: relative;
+}
+.loading:after,
+.loading-small:after,
+.icon-loading:after,
+.icon-loading-dark:after,
+.icon-loading-small:after,
+.icon-loading-small-dark:after {
+	z-index: 2;
+	content: "";
+	height: 32px;
+	width: 32px;
+	margin: -17px 0 0 -17px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	border-radius: 100%;
+	-webkit-animation: rotate .8s infinite linear;
+	animation: rotate .8s infinite linear;
+	-webkit-transform-origin: center;
+	-ms-transform-origin: center;
+	transform-origin: center;
+}
+.loading:after,
+.loading-small:after,
+.icon-loading:after,
+.icon-loading-dark:after,
+.icon-loading-small:after,
+.icon-loading-small-dark:after {
+	border: 1px solid rgba(85, 85, 85, 0.5);
+	border-top-color: #555;
+}
+
+.icon-loading-dark:after,
+.icon-loading-small-dark:after {
+	border: 1px solid rgba(187, 187, 187, 0.5);
+	border-top-color: #BBB;
+}
+
+.icon-loading-small:after,
+.icon-loading-small-dark:after {
+	height: 16px;
+	width: 16px;
+	margin: -9px 0 0 -9px;
+}
+
+/* Css replaced elements don't have ::after nor ::before */
+img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading {
+	background-image: url("../img/loading.gif");
+}
+img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark {
+	background-image: url("../img/loading-dark.gif");
+}
+img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small {
+	background-image: url("../img/loading-small.gif");
+}
+img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark {
+	background-image: url("../img/loading-small-dark.gif");
+}
+
+@-webkit-keyframes rotate {
+	from {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	to {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+@keyframes rotate {
+	from {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	to {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
 }
+
 .icon-32 {
 	background-size: 32px !important;
 }
diff --git a/core/css/styles.css b/core/css/styles.css
index 9257ae82669..736ddc6be01 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -801,8 +801,6 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
 .ui-dialog {position:fixed !important;}
 span.ui-icon {float: left; margin: 3px 7px 30px 0;}
 
-.loading { background: url('../img/loading.gif') no-repeat center; cursor: wait; }
-.loading-small { background: url('../img/loading-small.gif') no-repeat center; cursor: wait; }
 .move2trash { /* decrease spinner size */
 	width: 16px;
 	height: 16px;