fix(loading): light mode

1 files changed, 21 insertions, 15 deletions

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