diff --git a/packages/client/src/components/global/loading.vue b/packages/client/src/components/global/loading.vue
index b209c726aa..6dbf4a9bdd 100644
--- a/packages/client/src/components/global/loading.vue
+++ b/packages/client/src/components/global/loading.vue
@@ -34,26 +34,6 @@ const props = withDefaults(defineProps<{
 
 <style lang="scss" module>
 /* Credit to https://codepen.io/supah/pen/BjYLdW */
-@keyframes rotate {
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
-@keyframes dash {
-	0% {
-		stroke-dasharray: 1, 150;
-		stroke-dashoffset: 0;
-	}
-	50% {
-		stroke-dasharray: 90, 150;
-		stroke-dashoffset: -35;
-	}
-	100% {
-		stroke-dasharray: 90, 150;
-		stroke-dashoffset: -124;
-	}
-}
 
 .root {
 	padding: 32px;
@@ -92,9 +72,31 @@ const props = withDefaults(defineProps<{
 	z-index: 999;
 	width: var(--size);
 	height: var(--size);
-	stroke-linecap: round;
-	stroke-linejoin: round;
+	animation: rotate 2s linear infinite;
 
+	@keyframes rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes dash {
+		0% {
+			stroke-dasharray: 1, 150;
+			stroke-dashoffset: 0;
+		}
+		50% {
+			stroke-dasharray: 90, 150;
+			stroke-dashoffset: -35;
+		}
+		100% {
+			stroke-dasharray: 90, 150;
+			stroke-dashoffset: -124;
+		}
+	}
 	&.path {
     stroke: var(--accent);
     stroke-linecap: round;