49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<template>
|
|
<div :class="containerClasses">
|
|
<div
|
|
v-show="loading"
|
|
class="absolute w-full max-w-screen flex justify-center z-50 pointer-events-none"
|
|
>
|
|
<div
|
|
role="status"
|
|
class="relative bg-blue-500/60 mt-0 h-7 rounded-b-lg select-none px-3 w-2/3 lg:w-1/3 overflow-hidden shadow-sm"
|
|
>
|
|
<div
|
|
class="absolute h-full inset-0 bg-primary transition-[width]"
|
|
:style="`width: ${progressPercent}%`"
|
|
></div>
|
|
<div
|
|
class="relative z-10 h-full flex items-center justify-center gap-2 text-xs font-medium text-foreground-on-primary"
|
|
>
|
|
<span
|
|
class="h-1.5 w-1.5 rounded-full bg-foreground-on-primary animate-pulse"
|
|
/>
|
|
<span>Loading model</span>
|
|
<span class="tabular-nums">{{ progressPercent }}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { useInjectedViewerInterfaceState } from '~~/lib/viewer/composables/setup'
|
|
|
|
const { loading, loadProgress } = useInjectedViewerInterfaceState()
|
|
|
|
const progressPercent = computed(() =>
|
|
Math.max(0, Math.min(99, Math.floor(loadProgress.value * 100)))
|
|
)
|
|
|
|
const containerClasses = computed(() => {
|
|
const classParts = ['absolute left-0 right-0 z-40 h-30', 'transition-all']
|
|
|
|
if (loadProgress.value < 1 && loading.value) {
|
|
classParts.push('mt-0')
|
|
} else {
|
|
classParts.push('-mt-5')
|
|
}
|
|
|
|
return classParts.join(' ')
|
|
})
|
|
</script>
|