fix(loading): light mode

1 files changed, 32 insertions, 68 deletions

diff --git a/src/lib/Loading/Grid.svelte b/src/lib/Loading/Grid.svelte
index fb355e21..353600be 100644
--- a/src/lib/Loading/Grid.svelte
+++ b/src/lib/Loading/Grid.svelte
@@ -1,84 +1,47 @@
-<div class="grid">
-	<div />
-	<div />
-	<div />
-	<div />
-	<div />
-	<div />
-	<div />
-	<div />
-	<div />
+<script lang="ts">
+	export let colour = 'var(--fg)';
+</script>
+
+<div class="grid" style={`--loader-colour: ${colour};`}>
+	{#each Array.from({ length: 9 }) as _}
+		<div />
+	{/each}
 </div>
 
-<style>
+<style lang="scss">
 	.grid {
 		display: inline-block;
 		position: relative;
 		width: 64px;
 		height: 64px;
-	}
-
-	.grid div {
-		position: absolute;
-		width: 13px;
-		height: 13px;
-		border-radius: 50%;
-		background: #fff;
-		animation: grid 1.2s linear infinite;
-	}
-
-	.grid div:nth-child(1) {
-		top: 6px;
-		left: 6px;
-		animation-delay: 0s;
-	}
-
-	.grid div:nth-child(2) {
-		top: 6px;
-		left: 26px;
-		animation-delay: -0.4s;
-	}
-
-	.grid div:nth-child(3) {
-		top: 6px;
-		left: 45px;
-		animation-delay: -0.8s;
-	}
 
-	.grid div:nth-child(4) {
-		top: 26px;
-		left: 6px;
-		animation-delay: -0.4s;
-	}
-
-	.grid div:nth-child(5) {
-		top: 26px;
-		left: 26px;
-		animation-delay: -0.8s;
-	}
-
-	.grid div:nth-child(6) {
-		top: 26px;
-		left: 45px;
-		animation-delay: -1.2s;
+		div {
+			position: absolute;
+			width: 13px;
+			height: 13px;
+			border-radius: 50%;
+			background: var(--loader-colour);
+			animation: grid 1.2s linear infinite;
+		}
 	}
 
-	.grid div:nth-child(7) {
-		top: 45px;
-		left: 6px;
-		animation-delay: -0.8s;
+	@function column($i) {
+		@if $i % 3 == 0 {
+			@return 3;
+		} @else {
+			@return $i % 3;
+		}
 	}
 
-	.grid div:nth-child(8) {
-		top: 45px;
-		left: 26px;
-		animation-delay: -1.2s;
-	}
+	@for $i from 1 through 9 {
+		.grid div:nth-child(#{$i}) {
+			$row: ceil($i / 3);
+			$column: column($i);
 
-	.grid div:nth-child(9) {
-		top: 45px;
-		left: 45px;
-		animation-delay: -1.6s;
+			top: 6px + ($row - 1) * 20px;
+			left: 6px + ($column - 1) * 20px;
+			animation-delay: -0.4s * ($i - 1);
+		}
 	}
 
 	@keyframes grid {
@@ -86,6 +49,7 @@
 		100% {
 			opacity: 1;
 		}
+
 		50% {
 			opacity: 0.5;
 		}