Así que tengo en mi codepen algo como esto y estoy usando gsap si todo el mundo no lo sabe bien... solo piense en el dashoffset y el dasharray en la ruta de circulación de svg.
Puede ver esto en codepen, que es premium en nuestro grupo, pero no puedo pagarlo, así que quiero analizar la posibilidad de que pueda hacer esto con dos dashoffset, pero no funciona como quería. Aquí está el codepen que lo hace funcionar frente al código que hago. FUNCIONANDO vs NO FUNCIONANDO CORRECTAMENTE ..
.circle-container__progress { fill: none; stroke-linecap: round; stroke: var(--completion-color); stroke-dasharray: 100 100; stroke-linecap: square; stroke-width: var(--circle-border-width); /* // For animations... // transition: stroke-dashoffset 1s ease-in-out; // will-change: transform; */ }Creo que hay algo más en este código o no es hacer dos variaciones de dasharray animadas en ambas direcciones o no. Si no, simplemente diga la forma posible de hacerlo. Gracias por cualquier respuesta.
Aquí está la versión SVG pura (solo atributos SVG). PathLength es 100 y, por lo tanto, el primer valor en dasharray es un número entre 0 y 100. El "punto de partida" para la ruta es a las 6 en punto después de haber girado el círculo. El valor de compensación ahora es -(100 - value) / 2 .
let c1 = document.getElementById('c1'); document.forms.form01.range.addEventListener('change', e => { let value = parseInt(e.target.value); c1.setAttribute('stroke-dasharray', `${e.target.value} 100`); c1.setAttribute('stroke-dashoffset', `-${(100 - value) / 2}`); }); <form name="form01"> <input name="range" type="range" value="50" min="0" max="100" /> </form> <svg width="200" xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 50"> <circle id="c1" cx="25" cy="25" r="24" stroke-width="2" stroke="orange" fill="none" transform="rotate(90 25 25)" stroke-dasharray="50 100" stroke-dashoffset="-25" pathLength="100" /> </svg>Y la versión CSS animada se ve así:
circle#c1 { stroke-dasharray: 0 100; stroke-dashoffset: -50; animation: animateCircle 4s forwards linear; } @keyframes animateCircle { 0% { stroke-dasharray: 0 100; stroke-dashoffset: -50; } 100% { stroke-dasharray: 100 100; stroke-dashoffset: 0; } } <svg width="200" xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 50"> <circle id="c1" cx="25" cy="25" r="24" stroke-width="2" stroke="orange" fill="none" transform="rotate(90 25 25)" pathLength="100" /> </svg>