[ticket/14095] Use gmd animated svg spinner

PHPBB3-14095

phpBB/styles/prosilver/template/simple_footer.html

@@ -9,7 +9,12 @@
 		<div id="darken" class="darken">&nbsp;</div>
 	</div>
 	<div id="loading_indicator" class="loading_indicator">
-		<div class="loader">{L_Loading}...</div>
+		<div class="loader">
+			<svg class="spinner" width="48px" height="48px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg" aria-labelledby="loader-title" role="img">
+				<title id="loader-title">Loading...</title>
+				<circle class="spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+			</svg>
+		</div>
 	</div>
 	<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
 		<a href="#" class="alert_close">

phpBB/styles/prosilver/theme/colours.css

@@ -1333,13 +1333,26 @@ input.disabled {
 	background-color: #000000;
 }
 
-.loader,
+@keyframes colors {
-.loader:after {
+	0% {
-	background: #1481b8;
+		stroke: #4285f4;
 	}
 
-.loader:before {
+	25% {
-	background: #13a4ec;
+		stroke: #de3e35;
+	}
+
+	50% {
+		stroke: #f7c223;
+	}
+
+	75% {
+		stroke: #1b9a59;
+	}
+
+	100% {
+		stroke: #4285f4;
+	}
 }
 
 .dropdown-extended ul li {

phpBB/styles/prosilver/theme/common.css

@@ -1042,254 +1042,45 @@ fieldset.fields1 dl.pmlist dd.recipients {
 }
 
 .loader {
-	text-indent: -9999px;
-	border-radius: 24px;
-	position: relative;
-	display: inline-block;
-	overflow: hidden;
 	width: 48px;
 	height: 48px;
-	-webkit-transform: rotateZ(90deg);
+	padding: 12px;
-	transform: rotateZ(90deg);
-	-webkit-transform-origin: 50% 50%;
-	transform-origin: 50% 50%;
-	-webkit-animation: loader-background 3s infinite ease-in-out;
-	animation: loader-background 3s infinite ease-in-out;
 }
 
-.loader:after {
+.spinner {
-	border-radius: 24px 0 0 24px;
+	animation: rotator 1s linear infinite;
-	position: absolute;
-	top: 0;
-	right: 50%;
-	width: 50%;
-	height: 100%;
-	content: '';
-	-webkit-transform-origin: 100% 50%;
-	transform-origin: 100% 50%;
-	-webkit-animation: loader-top 3s infinite linear;
-	animation: loader-top 3s infinite linear;
 }
 
-.loader:before {
+.spinner-path {
-	border-radius: 24px 0 0 24px;
+	stroke-dasharray: 187;
-	position: absolute;
+	stroke-dashoffset: 0;
-	top: 0;
+	transform-origin: center;
-	right: 50%;
+	animation: dash 1s ease-in-out infinite, colors 4s ease-in-out infinite;
-	width: 50%;
-	height: 100%;
-	content: '';
-	-webkit-transform-origin: 100% 50%;
-	transform-origin: 100% 50%;
-	-webkit-animation: loader-bottom 3s infinite linear;
-	animation: loader-bottom 3s infinite linear;
 }
 
-@keyframes loader-top {
+@keyframes rotator {
-	2.5% {
-		background: #1481b8;
-		-webkit-transform: rotateY(0deg);
-		transform: rotateY(0deg);
-		-webkit-animation-timing-function: ease-in;
-		animation-timing-function: ease-in;
-	}
-
-	13.75% {
-		background: #083045;
-		-webkit-transform: rotateY(90deg);
-		transform: rotateY(90deg);
-		-webkit-animation-timing-function: step-start;
-		animation-timing-function: step-start;
-	}
-
-	13.76% {
-		background: #0a5276;
-		-webkit-transform: rotateY(90deg);
-		transform: rotateY(90deg);
-		-webkit-animation-timing-function: ease-out;
-		animation-timing-function: ease-out;
-	}
-
-	25% {
-		background: #13a4ec;
-		-webkit-transform: rotateY(180deg);
-		transform: rotateY(180deg);
-	}
-
-	27.5% {
-		background: #13a4ec;
-		-webkit-transform: rotateY(180deg);
-		transform: rotateY(180deg);
-		-webkit-animation-timing-function: ease-in;
-		animation-timing-function: ease-in;
-	}
-
-	41.25% {
-		background: #0a5276;
-		-webkit-transform: rotateY(90deg);
-		transform: rotateY(90deg);
-		-webkit-animation-timing-function: step-start;
-		animation-timing-function: step-start;
-	}
-
-	41.26% {
-		background: #0974aa;
-		-webkit-transform: rotateY(90deg);
-		transform: rotateY(90deg);
-		-webkit-animation-timing-function: ease-out;
-		animation-timing-function: ease-out;
-	}
-
-	50% {
-		background: #3db8f5;
-		-webkit-transform: rotateY(0deg);
-		transform: rotateY(0deg);
-	}
-
-	52.5% {
-		background: #3db8f5;
-		-webkit-transform: rotateY(0deg);
-		transform: rotateY(0deg);
-		-webkit-animation-timing-function: ease-in;
-		animation-timing-function: ease-in;
-	}
-
-	63.75% {
-		background: #0974aa;
-		-webkit-transform: rotateY(90deg);
-		transform: rotateY(90deg);
-		-webkit-animation-timing-function: step-start;
-		animation-timing-function: step-start;
-	}
-
-	63.76% {
-		background: #0697e0;
-		-webkit-transform: rotateY(90deg);
-		transform: rotateY(90deg);
-		-webkit-animation-timing-function: ease-out;
-		animation-timing-function: ease-out;
-	}
-
-	75% {
-		background: #6acbfb;
-		-webkit-transform: rotateY(180deg);
-		transform: rotateY(180deg);
-	}
-
-	77.5% {
-		background: #6acbfb;
-		-webkit-transform: rotateY(180deg);
-		transform: rotateY(180deg);
-		-webkit-animation-timing-function: ease-in;
-		animation-timing-function: ease-in;
-	}
-
-	91.25% {
-		background: #0697e0;
-		-webkit-transform: rotateY(90deg);
-		transform: rotateY(90deg);
-		-webkit-animation-timing-function: step-start;
-		animation-timing-function: step-start;
-	}
-
-	91.26% {
-		background: #083045;
-		-webkit-transform: rotateY(90deg);
-		transform: rotateY(90deg);
-		-webkit-animation-timing-function: ease-in;
-		animation-timing-function: ease-in;
-	}
-
-	100% {
-		background: #1481b8;
-		-webkit-transform: rotateY(0deg);
-		transform: rotateY(0deg);
-		-webkit-animation-timing-function: step-start;
-		animation-timing-function: step-start;
-	}
-}
-
-@keyframes loader-bottom {
 	0% {
-		background: #13a4ec;
+		transform: rotate(0deg);
-		-webkit-animation-timing-function: step-start;
-		animation-timing-function: step-start;
-	}
-
-	50% {
-		background: #13a4ec;
-		-webkit-animation-timing-function: step-start;
-		animation-timing-function: step-start;
-	}
-
-	75% {
-		background: #6acbfb;
-		-webkit-animation-timing-function: step-start;
-		animation-timing-function: step-start;
 	}
 
 	100% {
-		background: #6acbfb;
+		transform: rotate(270deg);
-		-webkit-animation-timing-function: step-start;
-		animation-timing-function: step-start;
 	}
 }
 
-@keyframes loader-background {
+@keyframes dash {
 	0% {
-		background: #1481b8;
+		stroke-dashoffset: 187;
-		-webkit-transform: rotateZ(180deg);
-		transform: rotateZ(180deg);
-	}
-
-	25% {
-		background: #1481b8;
-		-webkit-transform: rotateZ(180deg);
-		transform: rotateZ(180deg);
-		-webkit-animation-timing-function: step-start;
-		animation-timing-function: step-start;
-	}
-
-	27.5% {
-		background: #3db8f5;
-		-webkit-transform: rotateZ(90deg);
-		transform: rotateZ(90deg);
 	}
 
 	50% {
-		background: #3db8f5;
+		stroke-dashoffset: 46.75;
-		-webkit-transform: rotateZ(90deg);
+		transform: rotate(135deg);
-		transform: rotateZ(90deg);
-		-webkit-animation-timing-function: step-start;
-		animation-timing-function: step-start;
-	}
-
-	52.5% {
-		background: #3db8f5;
-		-webkit-transform: rotateZ(0deg);
-		transform: rotateZ(0deg);
-	}
-
-	75% {
-		background: #3db8f5;
-		-webkit-transform: rotateZ(0deg);
-		transform: rotateZ(0deg);
-		-webkit-animation-timing-function: step-start;
-		animation-timing-function: step-start;
-	}
-
-	77.5% {
-		background: #1481b8;
-		-webkit-transform: rotateZ(270deg);
-		transform: rotateZ(270deg);
 	}
 
 	100% {
-		background: #1481b8;
+		stroke-dashoffset: 187;
-		-webkit-transform: rotateZ(270deg);
+		transform: rotate(450deg);
-		transform: rotateZ(270deg);
-		-webkit-animation-timing-function: step-start;
-		animation-timing-function: step-start;
 	}
 }