Merge pull request #4704 from hanakin/ticket/14095

[ticket/14095] Pure CSS loader...No Image

phpBB/styles/prosilver/theme/colours.css

@@ -1275,9 +1275,26 @@ input.disabled {
 	background-color: #000000;
 }
 
-.loading_indicator {
-	background-color: #000000;
-	background-image: url('./images/loading.gif');
+@keyframes colors {
+	0% {
+		stroke: #4285f4;
+	}
+
+	25% {
+		stroke: #de3e35;
+	}
+
+	50% {
+		stroke: #f7c223;
+	}
+
+	75% {
+		stroke: #1b9a59;
+	}
+
+	100% {
+		stroke: #4285f4;
+	}
 }
 
 .dropdown-extended ul li {

phpBB/styles/prosilver/theme/common.css

@@ -1028,20 +1028,57 @@ fieldset.fields1 dl.pmlist dd.recipients {
 }
 
 .loading_indicator {
-	background: center center no-repeat;
-	border-radius: 5px;
-	opacity: 0.8;
 	position: fixed;
 	top: 50%;
 	left: 50%;
 	z-index: 51;
 	display: none;
-	width: 50px;
-	height: 50px;
-	margin-top: -50px;
-	margin-left: -50px;
 }
 
+.loader {
+	width: 48px;
+	height: 48px;
+	padding: 12px;
+}
+
+.spinner {
+	animation: rotator 1s linear infinite;
+}
+
+.spinner-path {
+	stroke-dasharray: 187;
+	stroke-dashoffset: 0;
+	transform-origin: center;
+	animation: dash 1s ease-in-out infinite, colors 4s ease-in-out infinite;
+}
+
+@keyframes rotator {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(270deg);
+	}
+}
+
+@keyframes dash {
+	0% {
+		stroke-dashoffset: 187;
+	}
+
+	50% {
+		stroke-dashoffset: 46.75;
+		transform: rotate(135deg);
+	}
+
+	100% {
+		stroke-dashoffset: 187;
+		transform: rotate(450deg);
+	}
+}
+
+
 /* Miscellaneous styles
 ---------------------------------------- */
 .copyright {