我需要在css中制作这样的gif动画，我用代码说明了这一点，但我无法反转动画

Question

我正在尝试用CSS或SVG模拟进度条的动画有办法做这个动画吗？

我添加了我的字符串作为嵌入代码，我尝试了SVG而不是CSS，这张图片取自设计师发送的视频

当前的代码示例我尝试应用动画

var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
centerX = canvas.width / 2,
centerY = canvas.height / 2,
rad = (Math.PI * 2) / 50,
speed = 1;
function blueCircle(speed) {
context.save();
context.beginPath();
context.strokeStyle = "#ffffff";
context.lineWidth = 4;
context.arc(
centerX,
centerY,
40,
-Math.PI / 2,
-Math.PI / 2 + speed * rad,
false
);
context.stroke();
context.restore();
}
function reblueCircle(speed) {
context.save();
context.beginPath();
context.strokeStyle = "#ffffff69";
context.lineWidth = 4;
context.arc(
centerX,
centerY,
40,
-Math.PI / 2,
-Math.PI / 2 + speed * rad,
false
);
context.stroke();
context.restore();
}
function whiteCircle() {
context.save();
context.beginPath();
context.strokeStyle = "#ffffff69";
context.lineWidth = 4;
context.arc(centerX, centerY, 40, 0, Math.PI * 2, false);
context.stroke();
context.closePath();
context.restore();
}
var res = false;
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
blueCircle(speed);
if (res) {
speed -= 0.1;
reblueCircle(speed);
}
if (speed > 50 && !res) {
res = true;
} else if (speed < 50 && !res) {
speed += 0.1;
} else if (speed > 50 && !res) {
res = true;
}
})();

body {
background: #000;
}

<canvas id="canvas" width="84" height="84"></canvas>

Answer 1

EDIT：我解决了您的实际请求，没有JS，只有CSS：

::root {
--val: 0;
}
svg {
transform: rotate(-90deg);
}
.percent {
animation: load 3s infinite;
stroke-dasharray: 100;
}

@keyframes load {
0% {
stroke-dashoffset: 0;
}
20% {
stroke-dashoffset: -100;
}
100% {
stroke-dashoffset: -200;
}
}

<svg width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
<circle class="percent" cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" />
</svg>

---

旧答案：

可以根据这个问题调整解决方案，比如：

let increasing = true
let progress = 0
function updateProgress() {
progress = increasing ? progress + 1 : progress - 1
if(progress > 100) {
progress = 100
increasing = false
}
if(progress < 0) {
progress = 0
increasing = true
}

document.querySelector('svg circle.percent').style.setProperty('--value', progress);
setTimeout(updateProgress, 50)
}
updateProgress()

::root {
--val: 0;
}
svg {
transform: rotate(-90deg);
}
.percent {
stroke-dasharray: 100;
stroke-dashoffset: calc(100 - var(--value, 0));
transition: all 0.1s;
}

<svg width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
<circle class="percent" cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" />
</svg>

但我必须说，如果你自己实现了画布解决方案，做得很好——为什么不直接使用它呢？