➕ADD: +1 snippet, +1 live demo

Author: manuarora700

data/snippets/loader.mdx

@@ -0,0 +1,36 @@
+---
+title: "Loader"
+description: "A simple reusable loader in React"
+logo: "react.png"
+---
+
+```js
+export default function Loader({ show }) {
+  return show ? <div className="loader"></div> : null;
+}
+```
+
+```css
+/* Loader */
+
+.loader {
+  border: 10px solid #eef0f1;
+  border-top: 10px solid #3b49df;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+```
+
+[Live Demo](http://manuarora.in/demos/demo/loader)
+[Source Code](https://github.com/manuarora700/portfolio-website/tree/master/pages/demos/demo/loader)

pages/demos/demo/loader/Loader.js

@@ -0,0 +1,4 @@
+import styles from "./Loader.module.css";
+export default function Loader({ show }) {
+  return show ? <div className={styles.loader}></div> : null;
+}

pages/demos/demo/loader/Loader.module.css

@@ -0,0 +1,19 @@
+/* Loader */
+
+.loader {
+  border: 10px solid #eef0f1;
+  border-top: 10px solid #3b49df;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

pages/demos/demo/loader/index.js

@@ -0,0 +1,9 @@
+import Loader from "./Loader";
+
+export default function Index() {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <Loader show={true} />
+    </div>
+  );
+}

public/sitemap.xml

@@ -32,6 +32,10 @@
     <loc>https://manuarora.in/snippets/gradient-text</loc>
   </url>
 
+  <url>
+    <loc>https://manuarora.in/snippets/loader</loc>
+  </url>
+
   <url>
     <loc>https://manuarora.in/snippets/moving-card</loc>
   </url>