feat: add loader

Author: ZanzyTHEbar

GUI/ETVR/ETVR.code-workspace

@@ -46,6 +46,9 @@
         "liveServer.settings.multiRootWorkspaceName": "ETVR",
         "[typescriptreact]": {
             "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[css]": {
+            "editor.defaultFormatter": "vscode.css-language-features"
         }
     }
 }

GUI/ETVR/src/components/Loader/index.tsx

@@ -0,0 +1,41 @@
+import './styles.css'
+
+interface LoaderProps {
+    gradient?: string
+    gradientMid?: string
+    gradientBot?: string
+    width?: string
+    height?: string
+}
+
+const Loader = (props: LoaderProps) => {
+    return (
+        <div class="spinner">
+            <svg
+                viewBox="0 0 100 100"
+                xmlns="http://www.w3.org/2000/svg"
+                class="shape"
+                preserveAspectRatio="none"
+                style={{
+                    width: props.width || '100%',
+                    height: props.height || '100%',
+                }}>
+                <defs>
+                    <linearGradient id="shape-gradient" x2="0.35" y2="1">
+                        <stop offset="0%" stop-color={props.gradient || 'var(--color-stop)'} />
+                        <stop
+                            offset="30%"
+                            stop-color={props.gradientMid || 'var(--color-middle-bot)'}
+                        />
+                        <stop offset="100%" stop-color={props.gradientBot || 'var(--color-bot)'} />
+                    </linearGradient>
+                </defs>
+                <g>
+                    <circle class="gradient-bg" cx="50" cy="50" r="20" />
+                </g>
+            </svg>
+        </div>
+    )
+}
+
+export default Loader

GUI/ETVR/src/components/Loader/styles.css

@@ -0,0 +1,46 @@
+#shape-gradient {
+    --color-stop: orange;
+    --color-middle-bot: rgba(255, 153, 0, 0.594);
+    --color-bot: rgba(255, 153, 0, 0.344);
+}
+
+.shape {
+    animation: rotate 4s ease-in-out infinite, dash 1.5s ease-in-out infinite;
+}
+
+.shape .gradient-bg {
+    stroke: url(#shape-gradient);
+    fill: none;
+    stroke-width: 0.25;
+}
+
+.spinner {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(-360deg);
+    }
+}

GUI/ETVR/src/components/Loaders/index.tsx

@@ -1,5 +1,6 @@
 import CameraAddress from './CameraAddress/CameraAddress'
 import CameraInfo from './CameraInfo/CameraInfo'
+import Loader from '@components/Loader'
 import { CameraStatus, CameraType } from '@store/camera/camera'
 
 // TODO: stuff todo requested by lorow
@@ -27,6 +28,16 @@ const Settings = (props: IProps) => {
                 cameraType={props.cameraType}
             />
             <CameraAddress onChange={(value) => props.onChange(value)} />
+            <br />
+            <div class="flex justify-center items-center">
+                <Loader
+                    gradient="orange"
+                    gradientMid="rgba(255, 153, 0, 0.594)"
+                    gradientBot="rgba(255, 153, 0, 0.144)"
+                    width="100px"
+                    height="100px"
+                />
+            </div>
         </div>
     )
 }