From 3b20b6ce0038ddb25e06ecc5103d77e19e23e1c1 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 16 Jan 2023 10:45:13 +1100
Subject: Add loading indicator

---
 src/components/LoadingModal.vue | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/components/LoadingModal.vue

(limited to 'src/components/LoadingModal.vue')

diff --git a/src/components/LoadingModal.vue b/src/components/LoadingModal.vue
new file mode 100644
index 0000000..5d207c7
--- /dev/null
+++ b/src/components/LoadingModal.vue
@@ -0,0 +1,27 @@
+<template>
+<div class="fixed left-0 top-0 w-full h-full bg-black/40">
+	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
+		flex items-center py-3 px-3 gap-2" :style="styles">
+		<loader-icon class="w-12 h-12 animate-[spin_6s_linear_infinite]"/>
+		<div class="whitespace-nowrap">{{msg}}</div>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue';
+import LoaderIcon from './icon/LoaderIcon.vue';
+import {useStore} from '../store';
+
+const store = useStore();
+
+defineProps({
+	msg: {type: String, required: true},
+});
+
+const styles = computed(() => ({
+	color: store.color.text,
+	backgroundColor: store.color.bgDark2,
+	borderRadius: store.borderRadius + 'px',
+}));
+</script>
-- 
cgit v1.2.3