textLoader init

services/mankkoo-ui/app/page.tsx

@@ -20,6 +20,7 @@ import { PieChartData } from "@/components/charts/piechart";
 import { TableData } from "@/components/charts/table";
 import { useEffect, useState } from "react";
 import Loader from "@/components/elements/Loader";
+import TextLoader from "@/components/elements/TextLoader";
 
 
 const LineChart = dynamic(() => import('@/components/charts/Line'), {

services/mankkoo-ui/components/elements/TextLoader.module.css

@@ -0,0 +1,32 @@
+.loader {
+    color: #FFF;
+    display: inline-block;
+    position: relative;
+    font-size: 48px;
+    font-family: Arial, Helvetica, sans-serif;
+    box-sizing: border-box;
+  }
+  .loader::after {
+    content: '';  
+    width: 5px;
+    height: 5px;
+    background: currentColor;
+    position: absolute;
+    bottom: 10px;
+    right: -5px;
+    box-sizing: border-box;
+    animation: animloader 1s linear infinite;
+  }
+
+  @keyframes animloader {
+    0% {
+      box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0);
+    }
+    50% {
+      box-shadow: 10px 0 white, 20px 0 rgba(255, 255, 255, 0);
+    }
+    100% {
+      box-shadow: 10px 0 white, 20px 0 white;
+    }
+  }
+

services/mankkoo-ui/components/elements/TextLoader.tsx

@@ -0,0 +1,7 @@
+import classes from '@/components/elements/Loader.module.css'
+
+export default function TextLoader() {
+    return (
+        <span className={classes.loader}>Loading</span>
+    )
+}