so I have found this animation and I was trying it, it works perfectly on my computer but once I switch to my phone the animation is just frozen on one frame. I don't see why it's doing this... By the way, I am using React, I don't think it matters but we never know.
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
Edit : So after trying on my brother's phone, it works, I don't know why it's doing that on my phone but working on others...
I think this happens because you use class instead of className. In React.JS we use className and the only reason behind the fact that it uses className over class is that the class is a reserved keyword in JavaScript and since we use JSX in React which itself is the extension of JavaScript, so we have to use className instead of the class attribute.
import React from 'react';
function Animation() {
return (
<div>
<svg className="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