写一个vue加载动画
时间: 2024-10-18 12:04:36 浏览: 33
在Vue.js中创建一个简单的加载动画,你可以利用HTML和CSS结合Vue组件的方式。这里有一个基本的例子,使用了Vue的`v-if`指令来控制动画的显示:
```html
<template>
<div id="loading-spinner" v-if="showLoading">
<div class="loader__circle"></div>
<div class="loader__circle loader__circle--2"></div>
<div class="loader__circle loader__circle--3"></div>
</div>
</template>
<script>
export default {
data() {
return {
showLoading: false, // 初始隐藏,待需要时设置为true
};
},
methods: {
startLoading() {
this.showLoading = true; // 当需要显示加载时调用此方法
},
stopLoading() {
this.showLoading = false; // 加载完成或出错时调用此方法
},
},
};
</script>
<style scoped>
#loading-spinner {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader__circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
animation: loading 1s ease infinite;
}
@keyframes loading {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
</style>
```
在这个例子中,当`startLoading()`方法被调用时,加载动画会显示出来,当`stopLoading()`被调用或者页面数据加载完毕时,动画就会消失。你可以根据需求自定义样式和动画效果。
阅读全文