Add loading indicator

1 files changed, 27 insertions, 0 deletions

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>