All Projects → vikrantnegi → react-native-animated-loader

vikrantnegi / react-native-animated-loader

Licence: MIT license
🍭 A React Native Loader Component which uses Airbnb's Lottie for beautiful loader animations.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-native-animated-loader

react-rounder
A collection of rounding components based on styled-components
Stars: ✭ 69 (-58.18%)
Mutual labels:  spinners, loaders
weather-icons
Free to use animated weather icons.
Stars: ✭ 341 (+106.67%)
Mutual labels:  lottie, lottie-animation
react-awesome-loaders
🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.
Stars: ✭ 146 (-11.52%)
Mutual labels:  spinners, loaders
react-native-lottie-splash-screen
⚡ Lottie splash screen for your react native app!
Stars: ✭ 124 (-24.85%)
Mutual labels:  lottie, lottie-animation
vue-spinners-css
Amazing collection of Vue spinners components with pure css.
Stars: ✭ 50 (-69.7%)
Mutual labels:  spinners, loaders
Wow
😮❗️❗️ Wow❗️ now my Go commandline app is spinning with 🌈 and 🐴
Stars: ✭ 494 (+199.39%)
Mutual labels:  spinners
Loader
This is a library having a collection of different types of CSS3 loaders , spinners
Stars: ✭ 149 (-9.7%)
Mutual labels:  spinners
Progress bar
Command-line progress bars and spinners for Elixir.
Stars: ✭ 281 (+70.3%)
Mutual labels:  spinners
Vue Spinners
💫 A collection of loading spinner components for Vuejs
Stars: ✭ 255 (+54.55%)
Mutual labels:  spinners
echarty
Minimal R/Shiny Interface to ECharts.js
Stars: ✭ 49 (-70.3%)
Mutual labels:  lottie-animation
React Spinners Css
Amazing collection of React spinners components with pure css
Stars: ✭ 232 (+40.61%)
Mutual labels:  spinners
Indicators
Activity Indicators for Modern C++
Stars: ✭ 1,838 (+1013.94%)
Mutual labels:  spinners
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+369.09%)
Mutual labels:  spinners
React Spinners Kit
A collection of loading spinners with React.js
Stars: ✭ 158 (-4.24%)
Mutual labels:  spinners
Spinners
🛎 60+ Elegant terminal spinners for Rust
Stars: ✭ 308 (+86.67%)
Mutual labels:  spinners
React Awesome Spinners
Awesome spinners for React 👋 ⚛ Built with styled-components 💅
Stars: ✭ 237 (+43.64%)
Mutual labels:  spinners
React Spinners
A collection of loading spinner components for react
Stars: ✭ 2,054 (+1144.85%)
Mutual labels:  spinners
Materialspinner
Implementation of a Material Spinner for Android with TextInputLayout functionalities
Stars: ✭ 107 (-35.15%)
Mutual labels:  spinners
React Native Animated Spinkit
A collection of loading indicators for React Native
Stars: ✭ 186 (+12.73%)
Mutual labels:  spinners
Ng Spin Kit
SpinKit (http://tobiasahlin.com/spinkit/) spinners for Angular
Stars: ✭ 90 (-45.45%)
Mutual labels:  spinners

React Native Animated Loader

Read more about this package here.

downloads npm-version github-tag license

A React Native Loader Component which uses Airbnb's Lottie for beautiful loader animations.

     

Prerequisites

Using React Native CLI

This library uses lottie-react-native to render loader animations. Therefore this library need to be installed and linked to your project before installing this package.

Follow the official instruction and linking guide here.

Using Expo

No need to do anything specific, just install the package itself. Expo already has Lottie library API available and it will take care of the rest.

Install

yarn add react-native-animated-loader

or

npm install react-native-animated-loader --save

Usage

Class Component

import React from 'react';
import { StyleSheet,Text } from 'react-native';
import AnimatedLoader from "react-native-animated-loader";

export default class Loader extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: false };
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({
        visible: !this.state.visible
      });
    }, 2000);
  }

  render() {
    const { visible } = this.state;
    return (
      <AnimatedLoader
        visible={visible}
        overlayColor="rgba(255,255,255,0.75)"
        source={require("./loader.json")}
        animationStyle={styles.lottie}
        speed={1}
      >
        <Text>Doing something...</Text>
      </AnimatedLoader>
    );
  }
}

const styles = StyleSheet.create({
  lottie: {
    width: 100,
    height: 100
  }
});

Functional Component

import React, {useState, useEffect} from 'react';
import {StyleSheet, Text} from 'react-native';
import AnimatedLoader from 'react-native-animated-loader';
export default function App() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    setInterval(() => {
      setVisible(!visible);
    }, 2000);
  }, []);

  return (
    <AnimatedLoader
      visible={visible}
      overlayColor="rgba(255,255,255,0.75)"
      animationStyle={styles.lottie}
      speed={1}>
      <Text>Doing something...</Text>
    </AnimatedLoader>
  );
}
const styles = StyleSheet.create({
  lottie: {
    width: 100,
    height: 100,
  },
});

Usage in Expo

Example for expo projects

Loader files

You can find free lottie files for your loaders here.

Props

Prop Description Default
source The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json'). Lottie Object
visible Controls the visibility of the loader. false
overlayColor Changes the color of the overlay. rgba(255,255,255,0.75)
animationStyle The style to be applied to the Lottie. -
animationType Changes animation on show and hide loader's view. none
speed The speed the animation will progress. 1
loop A boolean flag indicating whether or not the animation should loop. true

Work in Progress

  • Add expo example
  • Add ability to render text with animations
  • Add test cases

License

Licensed under the MIT.

Donation

If this project helped you reduce time to develop, please consider buying me a cup of coffee :)

Buy Me A Coffee

ko-fi

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].