63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
const isLoading = ref(true);
|
|
|
|
onMounted(() => {
|
|
// Simulate loading, remove in production and use actual data loading completion
|
|
setTimeout(() => {
|
|
isLoading.value = false;
|
|
}, 2000);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div v-if="isLoading" class="loading-spinner">
|
|
<div class="spinner" style="display: none;"></div>
|
|
</div>
|
|
<div v-else class="content">
|
|
<!-- Main content goes here when loading is complete -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
width: 100%;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.loading-spinner {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid rgb(81, 81, 81, 0.3);
|
|
border-radius: 50%;
|
|
border-top-color: transparent;
|
|
animation: spin 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
padding: 20px;
|
|
}
|
|
</style>
|
|
|
|
|