2024年06月19日 建站教程
加载动画效果是指在等待数据加载的同时，网站或应用中会出现一个动画效果，表示正在加载数据效果。下面web建站小编给大家简单介绍一下具体实现代码！
具体代码如下：
<template>
<div>
<div v-if="isLoading" class="loading"></div>
<div v-else>
<!-- 数据加载完了后显示的内容 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: true
};
},
mounted() {
// 模拟数据加载
setTimeout(() => {
this.isLoading = false;
}, 3000);
}
};
</script>
<style>
.loading {
animation: spin 1s linear infinite;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
margin: 20px auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
本文链接：http://so.lmcjl.com/news/6865/