39 lines
1.1 KiB
Vue
39 lines
1.1 KiB
Vue
<template>
|
|
<div class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
|
|
<div class="bg-white p-6 rounded-lg shadow-lg text-center flex flex-col items-center">
|
|
<div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mb-4"></div>
|
|
<p class="text-gray-700 text-lg">{{ __('loading_spinner.processing_image') }}</p>
|
|
<p v-if="progress > 0" class="text-gray-700 text-sm mt-2">{{ progress }}%</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps } from 'vue';
|
|
|
|
const props = defineProps({
|
|
progress: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.loader {
|
|
border-top-color: #3498db; /* Blue color for the spinner */
|
|
-webkit-animation: spinner 1.5s linear infinite;
|
|
animation: spinner 1.5s linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes spinner {
|
|
0% { -webkit-transform: rotate(0deg); }
|
|
100% { -webkit-transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spinner {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
</style>
|