feat(loading): grid loader

2 files changed, 97 insertions, 1 deletions

diff --git a/src/lib/Loading/Grid.svelte b/src/lib/Loading/Grid.svelte
new file mode 100644
index 00000000..fb355e21
--- /dev/null
+++ b/src/lib/Loading/Grid.svelte
@@ -0,0 +1,93 @@
+<div class="grid">
+	<div />
+	<div />
+	<div />
+	<div />
+	<div />
+	<div />
+	<div />
+	<div />
+	<div />
+</div>
+
+<style>
+	.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;
+	}
+
+	.grid div:nth-child(7) {
+		top: 45px;
+		left: 6px;
+		animation-delay: -0.8s;
+	}
+
+	.grid div:nth-child(8) {
+		top: 45px;
+		left: 26px;
+		animation-delay: -1.2s;
+	}
+
+	.grid div:nth-child(9) {
+		top: 45px;
+		left: 45px;
+		animation-delay: -1.6s;
+	}
+
+	@keyframes grid {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.5;
+		}
+	}
+</style>
diff --git a/src/lib/Loading/Message.svelte b/src/lib/Loading/Message.svelte
index bdc7556a..b0fc1e40 100644
--- a/src/lib/Loading/Message.svelte
+++ b/src/lib/Loading/Message.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import Ellipsis from './Ellipsis.svelte';
 	import Ripple from './Ripple.svelte';
+	import Grid from './Grid.svelte';
 
 	export let message: string | undefined = undefined;
-	export let loader: 'ellipsis' | 'ripple' = 'ellipsis';
+	export let loader: 'ellipsis' | 'ripple' | 'grid' = 'ellipsis';
 </script>
 
 <div class="card popup">
@@ -11,6 +12,8 @@
 		<Ellipsis />
 	{:else if loader === 'ripple'}
 		<Ripple />
+	{:else if loader === 'grid'}
+		<Grid />
 	{/if}
 
 	{#if message}