React native Question posted in
The official React Native documentation can be found here.

React native – Create loading spinner in react-native

I have created a loading spinner that is being used across my components in my React project. I am now creating a react-native version of this application, and want to re-create this loading spinner in react-native.

I am struggling to get this to work as a react-native screen. I have attempted to use Animated from react-native but have had no luck. I would like the exact same animation.

.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>
Tags:

2

Answers


  1. 0

    I can recommend Reanimated as animation library but you should re-write your animations(delay,spin etc.) in react-native-reanimated while keeping your other styles(background or margin).

    Login or Signup to reply.
  2. 0

    Just use ActivityIndicator from React-Native

    import { ActivityIndicator } from "react-native";

/......

<ActivityIndicator size={50} color={"white"} />

/......
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search