feat(loading): grid loader

1 files changed, 93 insertions, 0 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>