vue项目通过css实现loading转圈
时间: 2024-10-11 11:16:56 浏览: 12
在Vue项目中,通常会使用CSS和一些简单的HTML结构来实现加载动画,例如常见的圆形进度条或旋转的加载图标。你可以创建一个名为`spinner.vue`的组件,其中包含如下内容:
```html
<template>
<div class="spinner">
<div class="spinner-loader">
<svg width="48" height="48" viewBox="0 0 50 50">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6" stroke-miterlimit="10" />
</svg>
</div>
</div>
</template>
<style scoped>
.spinner {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.spinner-loader {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
}
.path {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
```
这个组件会在渲染时显示一个旋转的圆环作为加载指示。要在其他地方使用这个加载组件,只需在需要的地方引入并设置为v-if或v-show来控制其显示隐藏。