Javascript 使漂亮微调器的中心透明

以下是网络上最好的加载程序之一：

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
背景色：白色；
}
.集装箱{
位置：相对；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.集装箱{
位置：相对位置；
宽度：200px；
高度：200px；
边界半径：50%；
背景色：#4242；
动画：动画1s线性无限；
}
@关键帧设置动画{
0%{
变换：旋转（0度）；
}
100%{
变换：旋转（360度）；
}
}
.container.loader:：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：50%；
身高：100%；
背景：线性渐变（顶部、透明、淡蓝色）；
背景尺寸：100px 180px；
背景重复：无重复；
边框左上半径：100px；
边框左下半径：100px；
}
.container.loader:：after{
内容：''；
位置：绝对位置；
排名：0；
左：50%；
转化：translateX（-50%）；
宽度：10px；
高度：10px；
背景色：#00B0FF；
边界半径：50%；
z指数：10；
盒影：0 10px#00B0FF，
0 20px#00B0FF，
0 30px#00B0FF，
40px#00B0FF，
0 50px#00B0FF，
0 60px#00B0FF，
0 70px#00B0FF，
0 0 80px#00B0FF，
0 0 90px#00B0FF，
100px#00B0FF；
}
.集装箱.装载机跨度{
位置：绝对位置；
顶部：10px；
左：10px；
右：10px；
底部：10px；
边界半径：50%；
背景色：#212121；
}

---

您可以对before元素应用掩码，如下所示

 mask: radial-gradient(farthest-side at right, transparent calc(100% - 10px), #fff 0);

这将只保持边界可见，您可以去除所有背景

正文{
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
保证金：0；
背景：线性渐变（向右，灰色，透明）；
}
.加载器{
位置：相对位置；
宽度：150px；
高度：150像素；
边界半径：50%；
动画：动画1s线性无限；
}
@关键帧设置动画{
100%{
变换：旋转（360度）；
}
}
.loader：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：50%；
身高：100%；
背景：线性渐变（至顶部、透明、淡蓝色）无重复；
背景大小：100%80%；
边界半径：100px 0 100px；
-webkit遮罩：径向梯度（右侧最远侧，透明钙（100%-10px），#fff 0）；
}
.loader：：之后{
内容：''；
位置：绝对位置；
排名：0；
左：50%；
转化：translateX（-50%）；
宽度：10px；
高度：10px；
边界半径：50%；
z指数：10；
盒影：0 10px#00B0FF，
0 20px#00B0FF，
0 30px#00B0FF，
40px#00B0FF，
0 50px#00B0FF，
0 60px#00B0FF，
0 70px#00B0FF，
0 0 80px#00B0FF，
0 0 90px#00B0FF，
100px#00B0FF；
}

---

将

.container.loader

和

.container.loader span

中的背景色更改为更白的色调

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
背景色：白色；
}
.集装箱{
位置：相对；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.集装箱{
位置：相对位置；
宽度：200px；
高度：200px；
边界半径：50%；
背景色：#dbdb；
动画：动画1s线性无限；
}
@关键帧设置动画{
0%{
变换：旋转（0度）；
}
100%{
变换：旋转（360度）；
}
}
.container.loader:：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：50%；
身高：100%；
背景：线性渐变（顶部、透明、淡蓝色）；
背景尺寸：100px 180px；
背景重复：无重复；
边框左上半径：100px；
边框左下半径：100px；
}
.container.loader:：after{
内容：''；
位置：绝对位置；
排名：0；
左：50%；
转化：translateX（-50%）；
宽度：10px；
高度：10px；
背景色：#00B0FF；
边界半径：50%；
z指数：10；
盒影：0 10px#00B0FF，
0 20px#00B0FF，
0 30px#00B0FF，
40px#00B0FF，
0 50px#00B0FF，
0 60px#00B0FF，
0 70px#00B0FF，
0 0 80px#00B0FF，
0 0 90px#00B0FF，
100px#00B0FF；
}
.集装箱.装载机跨度{
位置：绝对位置；
顶部：10px；
左：10px；
右：10px；
底部：10px；
边界半径：50%；
背景色：#fefe；
}

---

不是直接的。

#212121

背景色隐藏了实际的动画内容。您可以尝试插入与微调器下使用的相同的背景元素。做得好。。。。。。