Estoy tratando de simular esta animación para la barra de progreso con CSS o SVG, ¿alguna forma de hacer esta animación?
Agregué mi cadena como código incrustado, probé con SVG, no con CSS, esta imagen es del video enviado por el diseñador
El ejemplo de código actual en el que trabajé para intentar aplicar la animación.
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>EDITAR: resolví su solicitud real, y sin JS, solo 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>Respuesta antigua:
Se puede adaptar una solución a partir de esta pregunta , así:
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>Pero debo decir que si usted mismo implementó la solución de lienzo, bien hecho, ¿por qué no usarla?