chore(client): tweak loading spinner design

1 files changed, 31 insertions, 21 deletions

diff --git a/packages/client/src/components/global/loading.vue b/packages/client/src/components/global/loading.vue
index 43ea1395ed..933c5e5881 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;
+		> .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;
 		}
 	}
 }