写一个vue请求加载动画代码
时间: 2024-05-01 17:16:27 浏览: 26
这里是一个简单的Vue请求加载动画代码示例:
```
<template>
<div>
<div v-if="loading" class="loading-overlay">
<div class="loading-spinner"></div>
</div>
<div v-else>
<!-- Your content goes here -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
};
},
methods: {
async fetchData() {
this.loading = true;
// Your API request goes here
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
this.loading = false;
// Do something with the response data
console.log(data);
},
},
mounted() {
this.fetchData();
},
};
</script>
<style>
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.loading-spinner {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
```
这个代码使用了一个布尔值 `loading` 来控制加载动画的显示和隐藏。在组件的 `fetchData` 方法中,我们首先将 `loading` 设置为 `true`,然后发起一个异步请求。请求完成后,我们将 `loading` 设置为 `false`,并在控制台输出响应数据。
在模板中,我们使用 `v-if` 条件渲染来控制加载动画的显示和隐藏。如果 `loading` 为 `true`,则显示一个半透明的遮罩层和一个旋转的加载动画;否则,显示实际的内容。
在样式中,我们定义了一个 `loading-overlay` 类来控制遮罩层的样式,以及一个 `loading-spinner` 类来控制加载动画的样式。加载动画使用了 CSS3 动画来实现旋转效果。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)