https://github.com/crispengari/progress-indicators-react-native
⭕ This repository contains some loading animation build using react native.
https://github.com/crispengari/progress-indicators-react-native
expo javascript loading loading-animations mobile react-native typescript
Last synced: 3 months ago
JSON representation
⭕ This repository contains some loading animation build using react native.
- Host: GitHub
- URL: https://github.com/crispengari/progress-indicators-react-native
- Owner: CrispenGari
- License: mit
- Created: 2022-12-27T10:31:06.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-03T13:59:48.000Z (almost 3 years ago)
- Last Synced: 2025-04-03T18:52:03.132Z (6 months ago)
- Topics: expo, javascript, loading, loading-animations, mobile, react-native, typescript
- Language: TypeScript
- Homepage:
- Size: 308 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### Progress Indicators
In this repository I'm going to show how to create some progress indicators in react native using the `Animated` API from react native. Here are the list of the indicators that are going to be implemented in this repository.
1. Indeterminate
2. Ripple
3. Circular
4. DotCircular
5. QuaterCircular
6. DoubleCircular
7. BoxIndicator
8. LinearProgress
9. LinearCircularOpacity
10. LinearCircularZoom
11. LinearCircularBounce
### Indeterminate Indicator
The code for creating an `indeterminate` indicator component is as follows:
```ts
import { View, Animated } from "react-native";
import React from "react";
const Indeterminate = () => {
const indicatorAnimation = React.useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.loop(
Animated.timing(indicatorAnimation, {
toValue: 1,
delay: 0,
duration: 2000,
useNativeDriver: false,
})
).start();
}, []);
const translateX = indicatorAnimation.interpolate({
inputRange: [0, 1],
outputRange: [-500, 500],
});
return (
);
};
export default Indeterminate;
```
Preview:
### Ripple
The code for creating an `ripple` indicator component is as follows:
```ts
import { Animated } from "react-native";
import React from "react";
const Ripple = () => {
const indicatorAnimation = React.useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.loop(
Animated.timing(indicatorAnimation, {
toValue: 1,
delay: 0,
duration: 1000,
useNativeDriver: false,
})
).start();
}, []);
const scale = indicatorAnimation.interpolate({
inputRange: [0, 1],
outputRange: [0, 2],
});
return (
);
};
export default Ripple;
```
Preview:
### Circular
The code for creating an `circular` indicator component is as follows:
```ts
import { Animated } from "react-native";
import React from "react";
const Circular = () => {
const indicatorAnimation = React.useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.loop(
Animated.timing(indicatorAnimation, {
toValue: 1,
delay: 0,
duration: 1000,
useNativeDriver: false,
})
).start();
}, []);
const rotate = indicatorAnimation.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "360deg"],
});
return (
);
};
export default Circular;
```
Preview:
### DotCircular
The code for creating an `dot-circular` progress indicator component is as follows:
```ts
import { Animated, View } from "react-native";
import React from "react";
const DotCircular = () => {
const indicatorAnimation = React.useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.loop(
Animated.timing(indicatorAnimation, {
toValue: 1,
delay: 0,
duration: 1000,
useNativeDriver: false,
})
).start();
}, []);
const rotate = indicatorAnimation.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "360deg"],
});
return (
);
};
export default DotCircular;
```
Preview:
### DoubleCircular
The code for creating an `double-circular` progress indicator component is as follows:
```ts
import { Animated } from "react-native";
import React from "react";
const DoubleCircular = () => {
const indicatorAnimation = React.useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.loop(
Animated.timing(indicatorAnimation, {
toValue: 1,
delay: 0,
duration: 1000,
useNativeDriver: false,
})
).start();
}, []);
const rotate = indicatorAnimation.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "360deg"],
});
return (
);
};
export default DoubleCircular;
```
Preview:
### QuaterCircular
The code for creating an `quater-circular` progress indicator component is as follows:
```ts
import { Animated } from "react-native";
import React from "react";
const QuaterCircular = () => {
const indicatorAnimation = React.useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.loop(
Animated.timing(indicatorAnimation, {
toValue: 1,
delay: 0,
duration: 1000,
useNativeDriver: false,
})
).start();
}, []);
const rotate = indicatorAnimation.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "360deg"],
});
return (
);
};
export default QuaterCircular;
```
Preview:
### BoxIndicator
The code for creating an `box-indicator` progress indicator component is as follows:
```ts
import { Animated, View, StyleSheet } from "react-native";
import React from "react";
const BoxIndicator = () => {
const indicatorAnimation1 = React.useRef(new Animated.Value(0)).current;
const indicatorAnimation2 = React.useRef(new Animated.Value(0)).current;
const indicatorAnimation3 = React.useRef(new Animated.Value(0)).current;
const indicatorAnimation4 = React.useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.loop(
Animated.timing(indicatorAnimation1, {
toValue: 1,
delay: 0,
duration: 1000,
useNativeDriver: false,
})
).start();
Animated.loop(
Animated.timing(indicatorAnimation2, {
toValue: 1,
delay: 1,
duration: 1000,
useNativeDriver: false,
})
).start();
Animated.loop(
Animated.timing(indicatorAnimation3, {
toValue: 1,
delay: 3,
duration: 1000,
useNativeDriver: false,
})
).start();
Animated.loop(
Animated.timing(indicatorAnimation4, {
toValue: 1,
delay: 5,
duration: 1000,
useNativeDriver: false,
})
).start();
}, []);
const opacity1 = indicatorAnimation1.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
const opacity2 = indicatorAnimation2.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
const opacity3 = indicatorAnimation3.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
const opacity4 = indicatorAnimation4.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
return (
);
};
export default BoxIndicator;
const styles = StyleSheet.create({
box: {
backgroundColor: "cornflowerblue",
width: 20,
height: 20,
borderRadius: 2,
margin: 2,
},
});
```
Preview:
### LinearProgress
The code for creating a `linear` progress indicator component is as follows:
```ts
import { View, Animated, Text } from "react-native";
import React from "react";
interface Props {
progress: number;
showProgress?: boolean;
}
const Linear: React.FunctionComponent = ({ progress, showProgress }) => {
return (
{showProgress ? (
{`${progress}%`}
) : null}
);
};
export default Linear;
```
Preview:
### LinearCircularOpacity
The code for creating a `linear-circular-opacity` progress indicator component is as follows:
```ts
import { Animated, View, StyleSheet } from "react-native";
import React from "react";
const LinearCircularOpacity = () => {
const indicatorAnimation1 = React.useRef(new Animated.Value(0)).current;
const indicatorAnimation2 = React.useRef(new Animated.Value(0)).current;
const indicatorAnimation3 = React.useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.loop(
Animated.timing(indicatorAnimation1, {
toValue: 1,
delay: 1,
duration: 1000,
useNativeDriver: false,
})
).start();
Animated.loop(
Animated.timing(indicatorAnimation2, {
toValue: 1,
delay: 2,
duration: 1000,
useNativeDriver: false,
})
).start();
Animated.loop(
Animated.timing(indicatorAnimation3, {
toValue: 1,
delay: 3,
duration: 1000,
useNativeDriver: false,
})
).start();
}, []);
const opacity1 = indicatorAnimation1.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
const opacity2 = indicatorAnimation2.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
const opacity3 = indicatorAnimation3.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
return (
);
};
export default LinearCircularOpacity;
const styles = StyleSheet.create({
box: {
backgroundColor: "cornflowerblue",
width: 10,
height: 10,
borderRadius: 10,
margin: 2,
},
});
```
Preview:
### LinearCircularZoom
The code for creating a `linear-circular-zoom` progress indicator component is as follows:
```ts
import { Animated, View, StyleSheet } from "react-native";
import React from "react";
const LinearCircularZoom = () => {
const indicatorAnimation1 = React.useRef(new Animated.Value(0)).current;
const indicatorAnimation2 = React.useRef(new Animated.Value(0)).current;
const indicatorAnimation3 = React.useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.loop(
Animated.timing(indicatorAnimation1, {
toValue: 1,
delay: 0,
duration: 1000,
useNativeDriver: false,
})
).start();
Animated.loop(
Animated.timing(indicatorAnimation2, {
toValue: 1,
delay: 2000,
duration: 1000,
useNativeDriver: false,
})
).start();
Animated.loop(
Animated.timing(indicatorAnimation3, {
toValue: 1,
delay: 4000,
duration: 1000,
useNativeDriver: false,
})
).start();
}, []);
const scale1 = indicatorAnimation1.interpolate({
inputRange: [0, 1],
outputRange: [2, 0],
});
const scale2 = indicatorAnimation2.interpolate({
inputRange: [0, 1],
outputRange: [2, 0],
});
const scale3 = indicatorAnimation3.interpolate({
inputRange: [0, 1],
outputRange: [2, 0],
});
const opacity1 = indicatorAnimation1.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
const opacity2 = indicatorAnimation2.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
const opacity3 = indicatorAnimation3.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
return (
);
};
export default LinearCircularZoom;
const styles = StyleSheet.create({
box: {
backgroundColor: "cornflowerblue",
width: 10,
height: 10,
borderRadius: 10,
margin: 5,
},
});
```
Preview:
### LinearCircularBounce
The code for creating a `linear-circular-bounce` progress indicator component is as follows:
```ts
import { Animated, View, StyleSheet } from "react-native";
import React from "react";
const LinearCircularBounce = () => {
const indicatorAnimation1 = React.useRef(new Animated.Value(0)).current;
const indicatorAnimation2 = React.useRef(new Animated.Value(0)).current;
const indicatorAnimation3 = React.useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.loop(
Animated.timing(indicatorAnimation1, {
toValue: 1,
delay: 0,
duration: 1000,
useNativeDriver: false,
})
).start();
Animated.loop(
Animated.timing(indicatorAnimation2, {
toValue: 1,
delay: 2000,
duration: 1000,
useNativeDriver: false,
})
).start();
Animated.loop(
Animated.timing(indicatorAnimation3, {
toValue: 1,
delay: 4000,
duration: 1000,
useNativeDriver: false,
})
).start();
}, []);
const translate1 = indicatorAnimation1.interpolate({
inputRange: [0, 1],
outputRange: [10, 0],
});
const translate2 = indicatorAnimation2.interpolate({
inputRange: [0, 1],
outputRange: [10, 0],
});
const translate3 = indicatorAnimation3.interpolate({
inputRange: [0, 1],
outputRange: [10, 0],
});
const opacity1 = indicatorAnimation1.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
const opacity2 = indicatorAnimation2.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
const opacity3 = indicatorAnimation3.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
return (
);
};
export default LinearCircularBounce;
const styles = StyleSheet.create({
box: {
backgroundColor: "cornflowerblue",
width: 10,
height: 10,
borderRadius: 10,
margin: 2,
},
});
```
Preview:
### License
In this repository we are using the `MIT` license which reads as follows.
```
MIT License
Copyright (c) 2022 crispengari
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```