Estoy tratando de animar un círculo SVG punteado como una barra de progreso, para que se llene en 3 segundos, pero me cuesta mucho lograr este efecto con el borde punteado. Aquí está el código que tengo actualmente y se anima, pero no como un progreso:
svg circle { animation: dash 3s linear forwards; } @keyframes dash { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } <svg class="progress-ring" viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <circle stroke="#000000" pathLength="215" stroke-width="7" fill="transparent" stroke-dasharray="6 6" r="57" cx="60" cy="60"/> </svg>https://codepen.io/xtnciwuu-the-selector/pen/abLXOJO
Cualquier ayuda sería muy apreciada
Aquí hay dos ejemplos diferentes. El primero es un poco "hacky" porque codifiqué el dasharray con todos los puntos, espacios y luego un espacio largo posterior.
El segundo ejemplo hace uso de una máscara. El círculo/raya rayada animado está enmascarado, por lo que se ve como guiones más pequeños.
Te da dos expresiones diferentes de la misma animación.
svg circle#c1 { animation: dash1 3s linear forwards; } @keyframes dash1 { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } } svg circle#c2 { animation: dash2 3s linear forwards; } @keyframes dash2 { from { stroke-dasharray: 0 36; } to { stroke-dasharray: 36 36; } } <svg class="progress-ring" viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <circle id="c1" stroke="#000000" pathLength="36" stroke-width="7" fill="transparent" stroke-dasharray="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 36" r="57" cx="60" cy="60" transform="rotate(-90 60 60)" /> </svg> <svg class="progress-ring" viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <mask id="m1"> <circle stroke="white" pathLength="36" stroke-width="7" fill="transparent" stroke-dasharray="1 1" r="57" cx="60" cy="60" /> </mask> </defs> <circle id="c2" mask="url(#m1)" stroke="#000000" pathLength="36" stroke-width="7" fill="transparent" stroke-dasharray="18 36" r="57" cx="60" cy="60" transform="rotate(-90 60 60)" /> </svg>