49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import React, { useEffect, useRef } from "react";
|
|
import { StyleSheet, View, Animated, Easing, ActivityIndicator } from "react-native";
|
|
|
|
const LoadingSymbol = () => {
|
|
const color = ["blue", "red", "purple", "green", "yellow", "orange"];
|
|
const random = Math.floor(Math.random() * color.length);
|
|
|
|
const spinValue = useRef(new Animated.Value(0)).current;
|
|
|
|
const spin = spinValue.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: ["0deg", "360deg"],
|
|
});
|
|
|
|
useEffect(() => {
|
|
Animated.loop(
|
|
Animated.timing(spinValue, {
|
|
toValue: 1,
|
|
duration: 2000,
|
|
easing: Easing.linear,
|
|
useNativeDriver: true,
|
|
})
|
|
).start();
|
|
}, [spinValue]);
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: color[random],
|
|
width: "100%",
|
|
height: "100%",
|
|
position: "absolute",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
loader: {
|
|
width: 100,
|
|
height: 100,
|
|
transform: [{ rotate: spin }],
|
|
},
|
|
});
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ActivityIndicator size="large" color="black" style={styles.loader} />
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default LoadingSymbol;
|