实现一个“转圈圈”
转圈圈是一个loading，在加载一些比较耗时的内容，用来进行过渡、提升UE的小动画；
P.S. : 类似的这样功能的还有骨架屏（skeleton），比如在知乎就很常见
转圈圈可以有多种形态，如下图[1]（好家伙，魔方、贪吃蛇、俄罗斯方块都整出来了,不能让产品经理看到）：
咱就不整这些花里胡哨的（关键我也不会啊），实现一个普普通通的转圈圈。
需求
产品经理A：请实现一个转圈圈，看你是新来的，就实现一个最简单的转圈圈吧。最低要求：看得出有动画。
内心OS
我画个圈圈都还要百度下border-raduis，还想有动画，这个需求做不了。
这个需求，肯定网上一大把，我可以借鉴一下（手动狗头）
先不管动画，实现一个圈。
<script setup>
defineProps({
msg: {
type: String,
required: false
}
})
</script>
<template>
<div class="divide"></div>
<div class="divide"></div>
<div class="divide"></div>
</template>
<style scoped>
.divide{
position: absolute;
/*left: 20px;*/
width: 3px;
height: 40px;
background-color: #181818;
}
.divide::before {
position: absolute;
top: 0;
/*display: block;*/
content: "";
width: 3px;
height: 7px;
background-color: red;
border-radius: 5px 5px 0 0;
}
.divide::after {
position: absolute;
bottom: 0;
display: block;
content: "";
width: 3px;
height: 7px;
background-color: yellow;
border-radius: 0 0 5px 5px;
}
.divide:nth-child(2){
rotate: 60deg;
}
.divide:nth-child(3){
rotate: 120deg;
}
</style>
此时网页展示如下图：
加一点魔法
这得学下CSS animation属性了
.divide:nth-child(1)::before {
animation: loading 1.2s linear 0s infinite;
}
.divide:nth-child(2)::before {
animation: loading 1.2s linear 0.2s infinite;
}
.divide:nth-child(3)::before {
animation: loading 1.2s linear 0.4s infinite;
}
@keyframes loading {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
效果如下图所示：
after为元素用同样思路，这样就实现了一个转圈圈啦。如下图所示。
