Initial commit 🚀

components/Home/posts/loading/Loading.js

@@ -0,0 +1,28 @@
+import React from "react";
+import "./loading.scss";
+
+const Loading = (props) => {
+    return (
+        <div className={`loading ${props.class}`}>
+            <svg
+                className="spinner"
+                width="60px"
+                height="60px"
+                viewBox="0 0 132 132"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <circle
+                    className="path"
+                    fill="none"
+                    strokeWidth="6"
+                    strokeLinecap="round"
+                    cx="66"
+                    cy="66"
+                    r="60"
+                />
+            </svg>
+        </div>
+    )
+};
+
+export default Loading;

components/Home/posts/loading/loading.scss

@@ -0,0 +1,38 @@
+// loading
+$offset: 374;
+$duration: 1.4s;
+
+.spinner {
+  animation: rotator $duration linear infinite;
+}
+
+@keyframes rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+.path {
+  stroke-dasharray: $offset;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation: dash $duration ease-in-out infinite;
+  stroke: black;
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: $offset;
+  }
+  50% {
+    stroke-dashoffset: $offset/4;
+    transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: $offset;
+    transform: rotate(450deg);
+  }
+}