Area loading matches Arco Spin with themed masks and messages. See the Element Plus docs for props.
Use the switch to control v-loading over existing content.
<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(true)
</script>
<template>
<div style="width: 100%">
<el-switch v-model="loading" active-text="Loading" style="margin-bottom: 16px" />
<div v-loading="loading" element-loading-text="Loading..." style="height: 180px; padding: 24px; border: 1px solid var(--el-border-color)">Project content is loading.</div>
</div>
</template>Show a fullscreen mask that closes after two seconds; this is an Element Plus extension.
<script setup lang="ts">
import { onBeforeUnmount } from 'vue'
import { ElLoading } from 'element-plus'
let instance: ReturnType<typeof ElLoading.service> | undefined
let timer: ReturnType<typeof setTimeout> | undefined
// Close automatically after 2 seconds; also clean up when the page is left.
function close() {
clearTimeout(timer)
instance?.close()
instance = undefined
}
function open() {
close()
instance = ElLoading.service({ fullscreen: true, text: 'Loading...' })
timer = setTimeout(close, 2000)
}
onBeforeUnmount(close)
</script>
<template>
<el-button type="primary" @click="open">Show fullscreen loading</el-button>
</template>