I have successfully implemented a loading spinner that is currently being used in various components of my React project. However, as I am now working on a react-native version of the application, I am faced with the challenge of recreating this loading spinner in react-native.
Despite my efforts to utilize Animated from react-native, I have been unable to achieve the desired result. My goal is to replicate the exact same animation in the react-native environment.
.container {
height: 200px;
width: 200px;
position: relative
}
.load {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:60px;
height:60px;
}
.loader {
border:0;
margin:0;
width:40%;
height:40%;
position:absolute;
border-radius:50%;
animation:spin 2s ease infinite
}
.load1 {
background:#19A68C;
animation-delay:-1.5s
}
.load2 {
background:#F63D3A;
animation-delay:-1s
}
.load3 {
background:#FDA543;
animation-delay:-0.5s
}
.load4 {
background:#193B48
}
@keyframes spin {
0%,100%{transform:translate(0)}
25%{transform:translate(160%)}
50%{transform:translate(160%, 160%)}
75%{transform:translate(0, 160%)}
}<div class="container">
<div class="load">
<div class="loader load1"></div>
<div class="loader load2"></div>
<div class="loader load3"></div>
<div class="loader load4"></div>
</div>
</div>