Html 创建一个加载器，其中直线在中心处形成一个圆

这是我的密码

.circle{
边框：1px实心透明；
边界半径：50%；
宽度：100px；
溢出：隐藏；
}
.第7分部{
宽度：100px；
高度：10px；
背景：红色；
颜色：白色；
字体大小：粗体；
位置：相对位置；
动画：mymove 6s无限；
}
.6分部{
宽度：100px；
高度：10px；
背景：红色；
颜色：白色；
字体大小：粗体；
位置：相对位置；
动画：mymove 6s无限；
边缘顶部：5px；
}
.1分部{
宽度：100px；
高度：10px；
背景：红色；
颜色：白色；
字体大小：粗体；
位置：相对位置；
动画：mymove 6s无限；
边缘顶部：5px；
}
.第2分部{
宽度：100px；
高度：10px；
背景：红色；
颜色：白色；
字体大小：粗体；
位置：相对位置；
动画：mymove 6s无限；
边缘顶部：5px；
}
.第3分部{
宽度：100px；
高度：10px；
背景：红色；
颜色：白色；
字体大小：粗体；
位置：相对位置；
动画：mymove 6s无限；
边缘顶部：5px；
}
.第4分部{
宽度：100px；
高度：10px；
背景：红色；
颜色：白色；
字体大小：粗体；
位置：相对位置；
动画：mymove 6s无限；
边缘顶部：5px；
}
.第5分部{
宽度：100px；
高度：10px；
背景：红色；
颜色：白色；
字体大小：粗体；
位置：相对位置；
动画：mymove 6s无限；
边缘顶部：5px；
}
#div7{动画计时函数：立方贝塞尔（0.6,0,1,1）；}
#div6{动画计时函数：立方贝塞尔（0.5,0,1,1）；}
#div1{动画计时函数：立方贝塞尔（0.4,0,1,1）；}
#div2{动画计时函数：立方贝塞尔（0.3,0,1,1）；}
#div3{动画计时函数：立方贝塞尔（0.2,0,0.58,1）；}
#div4{动画计时函数：立方贝塞尔（0.1,0,0.58,1）；}
#div5{动画计时函数：立方贝塞尔（0,1,1,1）；}
@关键帧mymove{
0%{
不透明度：0；
左：80%；
}
50%{
不透明度：1；
左：45%；
}
100%{
不透明度：0；
左：10%；
}
}

---

首先，我建议只使用一个元素来创建加载器，然后依靠

线性渐变来创建每一行。对于动画，我们只需调整每个动画的
背景大小
；因此，我们只需要一个动画

您必须固定每条线的
背景位置
，然后针对每个动画状态，逐个更改线的背景大小。因此，对于第一个状态，它们都处于
[0%10px]
（宽度/高度），然后在下一步中，最后一个状态变为
[50%10px]
，然后我们更改第二个状态，如此类推


.circle{
边框：1px实心透明；
边界半径：50%；
宽度：82px；
高度：82px；
溢出：隐藏；
背景图像：
线性梯度（红色、红色），
线性梯度（红色、红色），
线性梯度（红色、红色），
线性梯度（红色、红色），
线性梯度（红色、红色），
线性梯度（红色、红色），
线性梯度（红色、红色）；
背景尺寸：0%10px；
背景位置：100%0、100%12px、100%24px、100%36px、100%48px、100%60px、100%72px；
背景重复：无重复；
动画：动画6s无限立方贝塞尔（0.6,0,1,1）；；
}
@关键帧设置动画{
0% {
背景尺寸：0%10px，0%10px，0%10px，0%10px，0%10px，0%10px，0%10px，0%10px；
}
10% {
背景尺寸：0%10px，0%10px，0%10px，0%10px，0%10px，0%10px，50%10px；
}
15% {
背景尺寸：0%10px，0%10px，0%10px，0%10px，0%10px，50%10px，50%10px；
}
20% {
背景尺寸：0%10px，0%10px，0%10px，0%10px，50%10px，50%10px，50%10px；
}
25% {
背景尺寸：0%10px，0%10px，0%10px，50%10px，50%10px，50%10px，50%10px，50%10px；
}
30% {
背景尺寸：0%10px，0%10px，50%10px，50%10px，50%10px，50%10px，50%10px，50%10px；
}
35% {
背景尺寸：0%10px，50%10px，50%10px，50%10px，50%10px，50%10px，50%10px，50%10px；
}
40% {
背景尺寸：50%10px，50%10px，50%10px，50%10px，50%10px，50%10px，50%10px，50%10px；
}
45% {
背景尺寸：50%10px，50%10px，50%10px，50%10px，50%10px，50%10px，50%10px，50%10px；
}
50% {
背景尺寸：50%10px，50%10px，50%10px，50%10px，50%10px，50%10px，100%10px；
}
55% {
背景尺寸：50%10px，50%10px，50%10px，50%10px，50%10px，100%10px，100%10px；
}
60% {
背景尺寸：50%10px，50%10px，50%10px，50%10px，100%10px，100%10px，100%10px；
}
65% {
背景尺寸：50%10px，50%10px，50%10px，100%10px，100%10px，100%10px，100%10px，100%10px；
}
70% {
背景尺寸：50%10px，50%10px，100%10px，100%10px，100%10px，100%10px，100%10px，100%10px；
}
75% {
背景尺寸：50%10px，100%10px，100%10px，100%10px，100%10px，100%10px，100%10px，100%10px；
}
80% {
背景尺寸：100%10px，100%10px，100%10px，100%10px，100%10px，100%10px，100%10px，100%10px；
}
100% {
背景尺寸：100%10px，100%10px，100%10px，100%10px，100%10px，100%10px，100%10px，100%10px；
不透明度：0；
}
}

如果删除class=“circle”，行将开始从右向左移动