From 3fa62746db5e98f1417583bc7bcd4661496fec96 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Tue, 28 Jan 2025 19:59:07 +0330
Subject: [PATCH] Create loading indicator for page loading

---
 .../components/global/LoadingIndicator.vue    | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 frontend/components/global/LoadingIndicator.vue

diff --git a/frontend/components/global/LoadingIndicator.vue b/frontend/components/global/LoadingIndicator.vue
new file mode 100644
index 0000000..b82349b
--- /dev/null
+++ b/frontend/components/global/LoadingIndicator.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+
+// state
+
+const nuxtApp = useNuxtApp();
+const isLoading = ref(false);
+
+// hook
+
+nuxtApp.hook("page:start", () => {
+    isLoading.value = true;
+});
+
+nuxtApp.hook("page:finish", () => {
+    isLoading.value = false;
+});
+
+</script>
+
+<template>
+    <Transition name="fade">
+        <div
+            v-if="isLoading"
+            class="h-[20px] flex items-center justify-center bg-black w-full left-0 top-0 fixed z-100"
+        >
+            <div class="absolute progress-indicator w-1/3 bg-white h-1 rounded-full"></div>
+        </div>
+    </Transition>
+</template>
+
+<style>
+
+.progress-indicator {
+    animation-name: progress;
+    animation-duration: 0.65s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes progress {
+    0% {
+        left: -50%;
+    }
+
+    100% {
+        left: 110%;
+    }
+}
+</style>
\ No newline at end of file