From fe9a00d52d65469bd8e5a4728c691d47eb0bc6ff Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Sat, 17 Jun 2023 21:42:00 +0100
Subject: [PATCH] Add loading component

---
 src/lib/navigation/loading.svelte | 49 +++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/lib/navigation/loading.svelte

diff --git a/src/lib/navigation/loading.svelte b/src/lib/navigation/loading.svelte
new file mode 100644
index 0000000..184189d
--- /dev/null
+++ b/src/lib/navigation/loading.svelte
@@ -0,0 +1,49 @@
+<div id="container">
+    <div class="spinner"></div>
+    <p>Loading...</p>
+</div>
+
+<style>
+@keyframes spinner {
+ 0% {
+  transform:translate3d(-50%,-50%,0) rotate(0)
+ }
+ 100% {
+  transform:translate3d(-50%,-50%,0) rotate(360deg)
+ }
+}
+.spinner::before {
+ animation:1.5s linear infinite spinner;
+ animation-play-state:inherit;
+ border:solid 5px var(--overlay-color);
+ border-bottom-color: white;
+ border-radius:50%;
+ content:"";
+ height:40px;
+ width:40px;
+ position:absolute;
+ top:30%;
+ margin:auto;
+ transform:translate3d(-50%,-50%,0);
+ will-change:transform
+}
+#container {
+ position:fixed;
+ top:50%;
+ left:50%;
+ transform:translate(-50%,-50%);
+ margin:auto;
+ background-color:var(--overlay-color);
+ border-radius:15px;
+ padding:20px;
+ padding-bottom:1px;
+ min-width:90px;
+ max-width:90px
+}
+p {
+ padding-top:50px;
+ font-weight:bolder;
+ overflow-wrap:normal;
+ color: white;
+}
+</style>
\ No newline at end of file