我正在尝试寻找一种方法来实现没有动画的简单进度圈(静态)。我发现的示例具有非常不同的百分比偏移量,如下例所示。如何以这样的方式制作进度圈:如果我提供偏移量为 50%,那么它恰好是 50%(半填充)?
.u-absoluteCenter {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.u-flexCenter {
display: flex;
align-items: center;
justify-content: center;
}
.u-offscreen {
position: absolute;
left: -999em;
}
.demo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.progress {
transform: rotate(-90deg);
}
.progress__value {
stroke-dasharray: 0;
stroke-dashoffset: 0;
}
@-webkit-keyframes progress {
from {
stroke-dashoffset: 339.292;
}
to {
stroke-dashoffset: 0;
} …Run Code Online (Sandbox Code Playgroud)