así que encontré esta animación y la estaba probando, funciona perfectamente en mi computadora, pero una vez que cambio a mi teléfono, la animación se congela en un cuadro. No veo por qué está haciendo esto... Por cierto, estoy usando React, no creo que importe, pero nunca se sabe.

CSS:

 .loader { max-width: 15rem; width: 100%; height: auto; stroke-linecap: round; } circle { fill: none; stroke-width: 3.5; animation-name: preloader; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; transform-origin: 170px 170px; will-change: transform; } circle:nth-of-type(1) { stroke-dasharray: 550px; } circle:nth-of-type(2) { stroke-dasharray: 500px; } circle:nth-of-type(3) { stroke-dasharray: 450px; } circle:nth-of-type(4) { stroke-dasharray: 300px; } circle:nth-of-type(1) { animation-delay: -0.15s; } circle:nth-of-type(2) { animation-delay: -0.3s; } circle:nth-of-type(3) { animation-delay: -0.45s; } circle:nth-of-type(4) { animation-delay: -0.6s; } @keyframes preloader { 50% { transform: rotate(360deg); } }

html:

 import React from 'react' function Animation() { return ( <div> <svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340"> <circle cx="170" cy="170" r="160" stroke="#0000FF"/> <circle cx="170" cy="170" r="135" stroke="#404041"/> <circle cx="170" cy="170" r="110" stroke="#0000FF"/> <circle cx="170" cy="170" r="85" stroke="#404041"/> </svg> </div> ) } export default Animation

Editar: Entonces, después de probar en el teléfono de mi hermano, funciona, no sé por qué está haciendo eso en mi teléfono, pero funciona en otros...