From 4fc20587450bdba07c86bed2a5f68718ef5bf1f2 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 19 May 2022 15:24:35 +0900
Subject: chore(client): tweak loading spinner design

---
 packages/backend/src/server/web/style.css      | 30 +++++++++++---------------
 packages/backend/src/server/web/views/base.pug | 10 +++++++++
 2 files changed, 23 insertions(+), 17 deletions(-)

(limited to 'packages/backend/src/server')

diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css
index 9c4cd4b9bf..d59f00fe16 100644
--- a/packages/backend/src/server/web/style.css
+++ b/packages/backend/src/server/web/style.css
@@ -39,28 +39,24 @@ html {
 	width: 28px;
 	height: 28px;
 	transform: translateY(70px);
+	color: var(--accent);
 }
-
-#splashSpinner:before,
-#splashSpinner:after {
-	content: " ";
-	display: block;
-	box-sizing: border-box;
+#splashSpinner > .spinner {
+	position: absolute;
+	top: 0;
+	left: 0;
 	width: 28px;
 	height: 28px;
-	border-radius: 50%;
-	border: solid 4px;
+	fill-rule: evenodd;
+	clip-rule: evenodd;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-miterlimit: 1.5;
 }
-
-#splashSpinner:before {
-	border-color: currentColor;
-	opacity: 0.3;
+#splashSpinner > .spinner.bg {
+	opacity: 0.275;
 }
-
-#splashSpinner:after {
-	position: absolute;
-	top: 0;
-	border-color: currentColor transparent transparent transparent;
+#splashSpinner > .spinner.fg {
 	animation: splashSpinner 0.5s linear infinite;
 }
 
diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index d79354d118..a488e51171 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -65,4 +65,14 @@ html
 		div#splash
 			img#splashIcon(src= icon || '/static-assets/splash.png')
 			div#splashSpinner
+				<svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
+					<g transform="matrix(1,0,0,1,12,12)">
+						<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
+					</g>
+				</svg>
+				<svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
+					<g transform="matrix(1,0,0,1,12,12)">
+						<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
+					</g>
+				</svg>
 		block content
-- 
cgit v1.2.3-freya