主要的是这个预加载器对于任何扩展都应该是一样的，而且符号也应该有一个渐变。当然，这可以在 上实现css，但这仍然是一种变态......
预先感谢您的帮助...
document.querySelector(".circle").innerHTML = "Loading..."
.split("")
.map((e, i) => `<span style="--rot:${i * 11}deg">${e}</span>`)
.join("");*,
*::before,
*::after {
margin: 0;
padding: 0;
}
html,
body {
height: auto;
min-height: 100vh;
background-color: #272727;
color: burlywood;
font-size: 2vw;
border: 1px solid transparent;
}
body * {
/* border: 1px solid red; */
}
.circle {
margin: 100px auto;
width: 20vw;
height: 20vw;
position: relative;
border-radius: 50%;
overflow: hidden;
}
.circle::after,
.circle::before {
position: absolute;
content: "";
display: block;
width: inherit;
height: inherit;
border-radius: 50%;
/*
*/
}
.circle::after {
animation: rott 1s ease infinite;
background: linear-gradient(130deg, red 20%, purple 70%);
background-position: -42px -29px;
background-repeat: no-repeat;
border: 30px solid #272727;
box-sizing: border-box;
border-top: 30px solid transparent;
border-left: 30px solid transparent;
background-size: 132% 120%;
}
.circle::before {
background-color: #272727;
transform: translate(-50%, -50%);
z-index: 4;
left: 50%;
top: 50%;
width: calc(20vw - 30px);
height: calc(20vw - 30px);
}
span {
z-index: 9;
display: inline-flex;
justify-content: center;
align-items: flex-start;
width: 30px;
height: 100%;
position: absolute;
padding: 60px 0 0 0;
top: 50%;
left: 50%;
transform-origin: 6px 56% 0;
transform: translate(-50%, -50%) rotate(var(--rot));
}
span:nth-child(8) {
animation: opa 1s ease 0s infinite;
}
span:nth-child(9) {
animation: opa 1s ease 0.2s infinite;
}
span:nth-child(10) {
animation: opa 1s ease 0.5s infinite;
}
@keyframes rott {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes opa {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}<div class="circle"></div>
使用圆弧切割圆弧
stroke-dasharray弧线用线性渐变着色
通过更改属性旋转圆弧
stroke-dashoffset实现旋转不均匀
keyTimes="0;0.75;0.9;1"Loading ...通过应用沿弧定位文本<textPath href="#textPath" startOffset="12">更新
添加了文字动画加载中...
使用旋转并因此打开的遮罩半圆实现，遮盖文本
带有渐变动画的变体
在渐变中，
offset构成渐变的两种颜色的属性都是动画的：如果设置为
values="0;1;1"重复1，它会在填充结束时暂停当
values="0;1;1;0;0"将在两个方向进行绘画并在最终位置暂停时更新
引用@Air 的评论：
这个想法是使字母透明，只是与字母轮廓的线条，将它们包含在蒙版中并将该蒙版应用于旋转弧