revamp template

src/components/loaders/ContentLoader.tsx

@@ -0,0 +1,11 @@
+import { CircularProgress } from '@mui/material';
+
+const ContentLoader = () => {
+  return (
+    <div className="flex flex-col items-center justify-center self-center relative top-1/2 -translate-x-1/2">
+      <CircularProgress color="primary" />
+    </div>
+  );
+};
+
+export { ContentLoader };

src/components/loaders/ProgressBarLoader.tsx

@@ -0,0 +1,19 @@
+import { LinearProgress } from '@mui/material';
+
+const ProgressBarLoader = () => {
+  return (
+    <div className="fixed top-0 left-0 right-0 z-20">
+      <LinearProgress
+        sx={{
+          height: '3px', // Customize the height
+          opacity: '0.5',
+          '& .MuiLinearProgress-bar': {
+            backgroundColor: 'var(--tw-primary)' // Change the color of the progress bar
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+export { ProgressBarLoader };

src/components/loaders/ScreenLoader.tsx

@@ -0,0 +1,16 @@
+import { toAbsoluteUrl } from '@/utils';
+
+const ScreenLoader = () => {
+  return (
+    <div className="flex flex-col items-center gap-2 justify-center fixed inset-0 z-50 bg-light transition-opacity duration-700 ease-in-out">
+      <img
+        className="h-[30px] max-w-none"
+        src={toAbsoluteUrl('/media/app/mini-logo.svg')}
+        alt="logo"
+      />
+      <div className="text-gray-500 font-medium text-sm">Loading...</div>
+    </div>
+  );
+};
+
+export { ScreenLoader };

src/components/loaders/index.ts

@@ -0,0 +1,3 @@
+export * from './ContentLoader';
+export * from './ProgressBarLoader';
+export * from './ScreenLoader';