mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-04 07:00:23 +00:00
85017dbba0
* temp: move tailwind calls out of the layer * temp: ts tailwind config * upgrade: Tailwind v4 This got a little out of hand. Had to add a relative reference to the stylesheet in any component that uses @apply instead of the utility classes directly. * upgrade: bg-opacity is now a modifier * fix: Classic menu buttons assume a border * Update test expectations [skip ci] * fix: New preflight removal pattern * fix: Skeletons don't have skin * Update test expectations [skip ci] * fix: Missing @reference * [auto-fix] Apply ESLint and Prettier fixes --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: GitHub Action <action@github.com>
62 lines
1.2 KiB
Vue
62 lines
1.2 KiB
Vue
<template>
|
|
<Transition name="fade">
|
|
<div
|
|
v-if="modelLoading"
|
|
class="absolute inset-0 bg-black/50 flex items-center justify-center z-50"
|
|
>
|
|
<div class="flex flex-col items-center">
|
|
<div class="spinner" />
|
|
<div class="text-white mt-4 text-lg">
|
|
{{ loadingMessage }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { nextTick, ref } from 'vue'
|
|
|
|
import { t } from '@/i18n'
|
|
|
|
const modelLoading = ref(false)
|
|
const loadingMessage = ref('')
|
|
|
|
const startLoading = async (message?: string) => {
|
|
loadingMessage.value = message || t('load3d.loadingModel')
|
|
modelLoading.value = true
|
|
|
|
await nextTick()
|
|
}
|
|
|
|
const endLoading = async () => {
|
|
await new Promise((resolve) => setTimeout(resolve, 100))
|
|
modelLoading.value = false
|
|
}
|
|
|
|
defineExpose({
|
|
startLoading,
|
|
endLoading
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.spinner {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid #3498db;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|