dynamic add loader

maqi1520 · Mar 25, 2022 · 77dcf7a · 77dcf7a
1 parent fffa7b2
commit 77dcf7a
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 0 deletions.
diff --git a/src/pages/editor/index.tsx b/src/pages/editor/index.tsx
@@ -2,6 +2,7 @@ import dynamic from 'next/dynamic';
 
 const Editor = dynamic(() => import('../../components/editor'), {
   ssr: false,
+  loading: () => <div className="loader"></div>,
 });
 
 export default function EditorPage() {

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -28,6 +28,90 @@
 }
 
 @layer components {
+  /* From cssbuttons.io by @SchawnnahJ */
+  .loader {
+    position: relative;
+    width: 2.5em;
+    height: 2.5em;
+    transform: rotate(165deg);
+  }
+
+  .loader:before,
+  .loader:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: 0.5em;
+    height: 0.5em;
+    border-radius: 0.25em;
+    transform: translate(-50%, -50%);
+  }
+
+  .loader:before {
+    animation: before8 2s infinite;
+  }
+
+  .loader:after {
+    animation: after6 2s infinite;
+  }
+
+  @keyframes before8 {
+    0% {
+      width: 0.5em;
+      box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75),
+        -1em 0.5em rgba(111, 202, 220, 0.75);
+    }
+
+    35% {
+      width: 2.5em;
+      box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75),
+        0 0.5em rgba(111, 202, 220, 0.75);
+    }
+
+    70% {
+      width: 0.5em;
+      box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75),
+        1em 0.5em rgba(111, 202, 220, 0.75);
+    }
+
+    100% {
+      box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75),
+        -1em 0.5em rgba(111, 202, 220, 0.75);
+    }
+  }
+
+  @keyframes after6 {
+    0% {
+      height: 0.5em;
+      box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75),
+        -0.5em -1em rgba(233, 169, 32, 0.75);
+    }
+
+    35% {
+      height: 2.5em;
+      box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75),
+        -0.5em 0 rgba(233, 169, 32, 0.75);
+    }
+
+    70% {
+      height: 0.5em;
+      box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75),
+        -0.5em 1em rgba(233, 169, 32, 0.75);
+    }
+
+    100% {
+      box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75),
+        -0.5em -1em rgba(233, 169, 32, 0.75);
+    }
+  }
+
+  .loader {
+    position: absolute;
+    top: calc(50% - 1.25em);
+    left: calc(50% - 1.25em);
+  }
   .btn {
     @apply flex justify-center py-2 px-4 border border-gray-300 text-sm font-medium rounded-sm hover:border-indigo-500 hover:text-indigo-500 focus:outline-none;
   }