From 8705d1407be94f21170a2999eaacaafe96d3deae Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Tue, 30 Jan 2024 22:42:01 -0800
Subject: fix(loading): light mode

---
 src/lib/Loading/Ellipsis.svelte | 36 +++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 15 deletions(-)

(limited to 'src/lib/Loading/Ellipsis.svelte')

diff --git a/src/lib/Loading/Ellipsis.svelte b/src/lib/Loading/Ellipsis.svelte
index 1dbe3b9f..dd7800d7 100644
--- a/src/lib/Loading/Ellipsis.svelte
+++ b/src/lib/Loading/Ellipsis.svelte
@@ -1,26 +1,29 @@
-<div class="ellipsis">
-	<div />
-	<div />
-	<div />
-	<div />
+<script lang="ts">
+	export let colour = 'var(--fg)';
+</script>
+
+<div class="ellipsis" style={`--loader-colour: ${colour};`}>
+	{#each Array.from({ length: 4 }) as _}
+		<div />
+	{/each}
 </div>
 
-<style>
+<style lang="scss">
 	.ellipsis {
 		display: inline-block;
 		position: relative;
 		width: 80px;
 		height: 80px;
-	}
 
-	.ellipsis div {
-		position: absolute;
-		top: 33px;
-		width: 13px;
-		height: 13px;
-		border-radius: 50%;
-		background: #fff;
-		animation-timing-function: cubic-bezier(0, 1, 1, 0);
+		div {
+			position: absolute;
+			top: 33px;
+			width: 13px;
+			height: 13px;
+			border-radius: 50%;
+			background: var(--loader-colour);
+			animation-timing-function: cubic-bezier(0, 1, 1, 0);
+		}
 	}
 
 	.ellipsis div:nth-child(1) {
@@ -47,6 +50,7 @@
 		0% {
 			transform: scale(0);
 		}
+
 		100% {
 			transform: scale(1);
 		}
@@ -56,6 +60,7 @@
 		0% {
 			transform: translate(0, 0);
 		}
+
 		100% {
 			transform: translate(24px, 0);
 		}
@@ -65,6 +70,7 @@
 		0% {
 			transform: scale(1);
 		}
+
 		100% {
 			transform: scale(0);
 		}
-- 
cgit v1.2.3