From 1206af1e1d7b770f097d29cb5e7081258278cf1d Mon Sep 17 00:00:00 2001
From: Walidoux <ma.walidkorchi@icloud.com>
Date: Fri, 28 Apr 2023 14:34:46 +0100
Subject: [PATCH] feat(components/design): implement Loader

---
 src/components/design/Loader/Loader.tsx | 67 +++++++++++++++++++++++++
 src/components/design/Loader/index.ts   |  1 +
 2 files changed, 68 insertions(+)
 create mode 100644 src/components/design/Loader/Loader.tsx
 create mode 100644 src/components/design/Loader/index.ts

diff --git a/src/components/design/Loader/Loader.tsx b/src/components/design/Loader/Loader.tsx
new file mode 100644
index 0000000..ff33d69
--- /dev/null
+++ b/src/components/design/Loader/Loader.tsx
@@ -0,0 +1,67 @@
+import type { HTMLMotionProps } from 'framer-motion'
+
+import { AnimateView } from '../../system'
+
+interface LoaderProps extends HTMLMotionProps<'main'> {
+  active: boolean
+}
+
+export const Loader: React.FC<LoaderProps> = ({ active, ...rest }) => {
+  return (
+    <AnimateView
+      condition={active}
+      initial={{ opacity: 0, scale: 0 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0 }}
+      {...rest}>
+      <svg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='#fff'>
+        <g fill='none' fillRule='evenodd' strokeWidth={2}>
+          <circle cx='22' cy='22' r='1'>
+            <animate
+              attributeName='r'
+              begin='0s'
+              dur='1.8s'
+              values='1; 20'
+              calcMode='spline'
+              keyTimes='0; 1'
+              keySplines='0.165, 0.84, 0.44, 1'
+              repeatCount='indefinite'
+            />
+            <animate
+              attributeName='stroke-opacity'
+              begin='0s'
+              dur='1.8s'
+              values='1; 0'
+              calcMode='spline'
+              keyTimes='0; 1'
+              keySplines='0.3, 0.61, 0.355, 1'
+              repeatCount='indefinite'
+            />
+          </circle>
+          <circle cx='22' cy='22' r='1'>
+            <animate
+              attributeName='r'
+              begin='-0.9s'
+              dur='1.8s'
+              values='1; 20'
+              calcMode='spline'
+              keyTimes='0; 1'
+              keySplines='0.165, 0.84, 0.44, 1'
+              repeatCount='indefinite'
+            />
+            <animate
+              attributeName='stroke-opacity'
+              begin='-0.9s'
+              dur='1.8s'
+              values='1; 0'
+              calcMode='spline'
+              keyTimes='0; 1'
+              keySplines='0.3, 0.61, 0.355, 1'
+              repeatCount='indefinite'
+            />
+          </circle>
+        </g>
+      </svg>
+    </AnimateView>
+  )
+}
diff --git a/src/components/design/Loader/index.ts b/src/components/design/Loader/index.ts
new file mode 100644
index 0000000..4e20d2b
--- /dev/null
+++ b/src/components/design/Loader/index.ts
@@ -0,0 +1 @@
+export * from './Loader'