chore(client): tweak loading spinner design

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;
 }
 

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

packages/client/src/components/global/loading.vue

 <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;
+		> .spinner {
+			position: absolute;
+			top: 0;
+			left: 0;
 			width: var(--size);
 			height: var(--size);
-			border-radius: 50%;
-			border: solid 4px;
+			fill-rule: evenodd;
+			clip-rule: evenodd;
+			stroke-linecap: round;
+			stroke-linejoin: round;
+			stroke-miterlimit: 1.5;
 		}
 
-		&:before {
-			border-color: currentColor;
-			opacity: 0.3;
+		> .bg {
+			opacity: 0.275;
 		}
 
-		&:after {
-			position: absolute;
-			top: 0;
-			border-color: currentColor transparent transparent transparent;
-			animation: ring 0.5s linear infinite;
+		> .fg {
+			animation: spinner 0.5s linear infinite;
 		}
 	}
 }