Skloading-animated-react NPM

React Native Loading Animation

A customizable loading animation component for React Native applications. This package provides various loading animations with text support to enhance the user experience during data fetching or processing tasks.

Installation
Usage
Available Animations
Props
Example
Contributing
License

usage

To use the LoadingAnimation component in your React Native application, follow these steps:

Import the Component:

javascript

import { LoadingAnimation } from 'react-native-loading-animation';

Use the Component in Your App:

Here’s an example of how to use the LoadingAnimation component:

javascript

import React from 'react'; import { View, StyleSheet } from 'react-native'; import { LoadingAnimation } from 'react-native-loading-animation';

const App = () => { return ( ); };

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', }, });

export default App;

Available Animation

You can choose from the following animations:

Basic Spinner: A simple rotating spinner. Rainbow Loader: Colorful loading animation with rainbow colors. Square in a Circle Loader: Animated squares rotating within a circle. Dump Truck Loader: Animated dump truck icon. Dots Loader: Dots that appear sequentially to indicate loading. Bouncing Ball Loader: Bouncing balls as a loading indicator. Rotating Arrows Loader: Rotating arrows indicating loading. Clock Animation: An animated clock to represent waiting time.

alt text

Example

To see a complete example of the LoadingAnimation component in action, you can refer to the example code provided in the Usage section. Below is an additional example using different animation types:

javascript

import React from 'react'; import { View, StyleSheet } from 'react-native'; import { LoadingAnimation } from 'react-native-loading-animation';

const App = () => { return ( ); };

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', }, });

export default App;