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: [PATCH] chore(client): tweak loading spinner design

---
 packages/backend/src/server/web/style.css     | 34 +++++------
 .../backend/src/server/web/views/base.pug     | 10 ++++
 .../client/src/components/global/loading.vue  | 60 +++++++++++--------
 3 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css
index 9c4cd4b9b..d59f00fe1 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;
-	width: 28px;
-	height: 28px;
-	border-radius: 50%;
-	border: solid 4px;
-}
-
-#splashSpinner:before {
-	border-color: currentColor;
-	opacity: 0.3;
-}
-
-#splashSpinner:after {
+#splashSpinner > .spinner {
 	position: absolute;
 	top: 0;
-	border-color: currentColor transparent transparent transparent;
+	left: 0;
+	width: 28px;
+	height: 28px;
+	fill-rule: evenodd;
+	clip-rule: evenodd;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-miterlimit: 1.5;
+}
+#splashSpinner > .spinner.bg {
+	opacity: 0.275;
+}
+#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 d79354d11..a488e5117 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
diff --git a/packages/client/src/components/global/loading.vue b/packages/client/src/components/global/loading.vue
index 43ea1395e..933c5e588 100644
--- a/packages/client/src/components/global/loading.vue
+++ b/packages/client/src/components/global/loading.vue
@@ -1,6 +1,17 @@
 <template>
 <div class="yxspomdl" :class="{ inline, colored, mini }">
-	<div class="ring"></div>
+	<div class="container">
+		<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>
+	</div>
 </div>
 </template>
 
@@ -19,7 +30,7 @@ const props = withDefaults(defineProps<{
 </script>
 
 <style lang="scss" scoped>
-@keyframes ring {
+@keyframes spinner {
 	0% {
 		transform: rotate(0deg);
 	}
@@ -33,7 +44,7 @@ const props = withDefaults(defineProps<{
 	text-align: center;
 	cursor: wait;
 
-	--size: 48px;
+	--size: 40px;
 
 	&.colored {
 		color: var(--accent);
@@ -50,32 +61,31 @@ const props = withDefaults(defineProps<{
 		--size: 32px;
 	}
 
-	> .ring {
+	> .container {
 		position: relative;
-		display: inline-block;
-		vertical-align: middle;
+		width: var(--size);
+		height: var(--size);
+		margin: 0 auto;
 
-		&:before,
-		&:after {
-			content: " ";
-			display: block;
-			box-sizing: border-box;
-			width: var(--size);
-			height: var(--size);
-			border-radius: 50%;
-			border: solid 4px;
-		}
-
-		&:before {
-			border-color: currentColor;
-			opacity: 0.3;
-		}
-
-		&:after {
+		> .spinner {
 			position: absolute;
 			top: 0;
-			border-color: currentColor transparent transparent transparent;
-			animation: ring 0.5s linear infinite;
+			left: 0;
+			width: var(--size);
+			height: var(--size);
+			fill-rule: evenodd;
+			clip-rule: evenodd;
+			stroke-linecap: round;
+			stroke-linejoin: round;
+			stroke-miterlimit: 1.5;
+		}
+
+		> .bg {
+			opacity: 0.275;
+		}
+
+		> .fg {
+			animation: spinner 0.5s linear infinite;
 		}
 	}
 }