Merge pull request #24491 from owncloud/new-animated-full-css-spinner

New animated loader: full css

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;

core/css/icons.css

@@ -14,15 +14,93 @@
 	background-image: url('../img/breadcrumb.svg');
 }
 
-.icon-loading {
-	background-image: url('../img/loading.gif');
+.loading,
+.loading-small,
+.icon-loading,
+.icon-loading-dark,
+.icon-loading-small,
+.icon-loading-small-dark {
+	position: relative;
 }
-.icon-loading-dark {
-	background-image: url('../img/loading-dark.gif');
+.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;
 }
-.icon-loading-small {
-	background-image: url('../img/loading-small.gif');
+.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;
 }

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;

core/js/js.js

@@ -1579,7 +1579,7 @@ function initCore() {
 			}
 			$page.find('img').remove();
 			$page.find('div').remove(); // prevent odd double-clicks
-			$page.prepend($('<div/>').addClass('icon-loading-dark'));
+			$page.prepend($('<div/>').addClass('icon-loading-small-dark'));
 		});
 	}