38 lines
1.1 KiB
Vue
38 lines
1.1 KiB
Vue
<script setup>
|
|
const progress = ref(0)
|
|
const subStatus = ref('Parsing layout')
|
|
const subStatuses = ['Parsing layout', 'Mapping styles', 'Extracting text', 'Building text boxes', 'Placing images', 'Finalising DOCX']
|
|
|
|
let progressInterval = null
|
|
let subInterval = null
|
|
|
|
onMounted(() => {
|
|
progressInterval = setInterval(() => {
|
|
if (progress.value < 90) progress.value += 1
|
|
}, 80)
|
|
let idx = 0
|
|
subInterval = setInterval(() => {
|
|
idx = (idx + 1) % subStatuses.length
|
|
subStatus.value = subStatuses[idx]
|
|
}, 900)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
clearInterval(progressInterval)
|
|
clearInterval(subInterval)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full max-w-[680px] mx-auto mt-6 bg-white border border-gray-200 rounded-xl p-12 flex flex-col items-center gap-6">
|
|
<div class="w-full bg-blue-50 rounded-full h-1 overflow-hidden">
|
|
<div
|
|
class="h-full bg-[#1a56db] rounded-full transition-all duration-300"
|
|
:style="{ width: progress + '%' }"
|
|
/>
|
|
</div>
|
|
<p class="text-base text-gray-600">Converting InDesign to Word...</p>
|
|
<p class="text-sm text-gray-400">{{ subStatus }}</p>
|
|
</div>
|
|
</template>
|