vue3.2实现loading静态转圈,线条已中心点顺时针方向,线条需要有一百根
时间: 2024-03-17 10:41:40 浏览: 12
可以使用vue组件来实现loading静态转圈,以下是一个简单的实现方式:
```vue
<template>
<div class="loading">
<div class="spinner"></div>
</div>
</template>
<script>
export default {
name: 'Loading',
data() {
return {
lines: 100
}
}
}
</script>
<style>
.loading {
width: 500px;
height: 500px;
position: relative;
background-color: #f3f3f3;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.spinner div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 2px;
height: 40%;
background-color: #000;
transform-origin: 0 100%;
}
.spinner div:nth-child(odd) {
transform-origin: 0 0;
}
.spinner div:nth-child(1) {
transform: rotate(0deg);
}
.spinner div:nth-child(2) {
transform: rotate(3.6deg);
}
/* 省略其他 98 个 div 样式 */
</style>
```
在上述代码中,我们使用了一个div元素作为loading的容器,并设置了宽高为500px,背景为灰色。接着,我们使用了另一个div元素作为菊花loading的背景,并设置了border-radius属性为50%,表示为一个圆形。然后,我们使用100个div元素来表示菊花loading的线条,使用transform-origin将线条的旋转中心点设置在左上角或左下角,从而使线条能够按照中心点顺时针旋转。
最后,我们使用nth-child选择器来为每个div元素设置不同的旋转角度,从而实现loading静态转圈的效果。
这样,就可以实现Vue3.2版本的loading静态转圈了,线条数量可以通过data中的lines属性来控制。