diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css
index 2322b3da88..9ff349d3e8 100644
--- a/phpBB/adm/style/admin.css
+++ b/phpBB/adm/style/admin.css
@@ -1665,19 +1665,77 @@ input.button1:focus, input.button2:focus {
 	}
 }
 
-#loading_indicator {
-	background: #000000 url("../images/loading.gif") center center no-repeat;
-	border-radius: 5px;
-	display: none;
-	opacity: 0.8;
-	margin-top: -50px;
-	margin-left: -50px;
-	height: 50px;
-	width: 50px;
+.loading_indicator {
 	position: fixed;
-	left: 50%;
 	top: 50%;
+	left: 50%;
 	z-index: 51;
+	display: none;
+}
+
+.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);
+	}
+}
+
+@keyframes colors {
+	0% {
+		stroke: #4285f4;
+	}
+
+	25% {
+		stroke: #de3e35;
+	}
+
+	50% {
+		stroke: #f7c223;
+	}
+
+	75% {
+		stroke: #1b9a59;
+	}
+
+	100% {
+		stroke: #4285f4;
+	}
 }
 
 /* Pagination
diff --git a/phpBB/adm/style/overall_footer.html b/phpBB/adm/style/overall_footer.html
index 8745286d64..7afceab319 100644
--- a/phpBB/adm/style/overall_footer.html
+++ b/phpBB/adm/style/overall_footer.html
@@ -20,7 +20,14 @@
 		<div id="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
 			<div id="darken">&nbsp;</div>
 		</div>
-		<div id="loading_indicator"></div>
+		<div id="loading_indicator" class="loading_indicator">
+			<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"></a>
diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js
index b00da3caff..db30385faa 100644
--- a/phpBB/assets/javascript/core.js
+++ b/phpBB/assets/javascript/core.js
@@ -27,11 +27,7 @@ phpbb.isTouch = (window && typeof window.ontouchstart !== 'undefined');
  */
 phpbb.loadingIndicator = function() {
 	if (!$loadingIndicator) {
-		$loadingIndicator = $('<div />', { 
-			id: 'loading_indicator', 
-			class: 'loading_indicator', 
-		});
-		$loadingIndicator.appendTo('#page-footer');
+		$loadingIndicator = $('#loading_indicator');
 	}
 
 	if (!$loadingIndicator.is(':visible')) {
diff --git a/phpBB/styles/prosilver/template/overall_footer.html b/phpBB/styles/prosilver/template/overall_footer.html
index 413c93f79a..6869e29964 100644
--- a/phpBB/styles/prosilver/template/overall_footer.html
+++ b/phpBB/styles/prosilver/template/overall_footer.html
@@ -18,6 +18,14 @@
 	<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
 		<div id="darken" class="darken">&nbsp;</div>
 	</div>
+	<div id="loading_indicator" class="loading_indicator">
+		<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">
diff --git a/phpBB/styles/prosilver/template/simple_footer.html b/phpBB/styles/prosilver/template/simple_footer.html
index 614c137835..14dd35a84d 100644
--- a/phpBB/styles/prosilver/template/simple_footer.html
+++ b/phpBB/styles/prosilver/template/simple_footer.html
@@ -8,8 +8,14 @@
 	<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
 		<div id="darken" class="darken">&nbsp;</div>
 	</div>
-	<div id="loading_indicator" class="loading_indicator"></div>
-
+	<div id="loading_indicator" class="loading_indicator">
+		<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">
 			<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index 11b0fd758e..8502613020 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/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 {
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index 1d630bdaee..6d72a6d98b 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/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 {
diff --git a/phpBB/styles/prosilver/theme/images/loading.gif b/phpBB/styles/prosilver/theme/images/loading.gif
deleted file mode 100644
index e1ed0883e0..0000000000
Binary files a/phpBB/styles/prosilver/theme/images/loading.gif and /dev/null differ