44 lines
980 B
Vue
44 lines
980 B
Vue
|
<template>
|
||
|
|
<div class="zfile-async-loading">
|
||
|
|
<el-skeleton class="w-full h-[40vh] sm:h-[80vh]" animated>
|
||
|
|
<template #template>
|
||
|
|
<div class="flex justify-center items-center h-full loading">
|
||
|
|
<svg-icon name="file-type-video" class="w-12 h-12"></svg-icon>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-skeleton>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
onMounted(() => {
|
||
|
|
document.querySelector(".el-dialog .el-dialog__title").innerHTML = '加载中...';
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
|
||
|
|
.zfile-async-loading {
|
||
|
|
:deep(.el-skeleton__item) {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading {
|
||
|
|
background: linear-gradient(
|
||
|
|
100deg,
|
||
|
|
rgba(255, 255, 255, 0) 40%,
|
||
|
|
rgba(255, 255, 255, .5) 50%,
|
||
|
|
rgba(255, 255, 255, 0) 60%
|
||
|
|
) #ededed;
|
||
|
|
background-size: 200% 100%;
|
||
|
|
background-position-x: 180%;
|
||
|
|
animation: 1s loading ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes loading {
|
||
|
|
to {
|
||
|
|
background-position-x: -20%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|