@matheusdearaujo/react-native-loading-ellipsis NPM

React Native Loading Ellipsis

A fork of a simple library loading dots component.

Installation

npm:

npm install --save @matheusdearaujo/react-native-loading-ellipsis

yarn:

yarn add @matheusdearaujo/react-native-loading-ellipsis

Usage

import EllipsisLoading from "@matheusdearaujo/react-native-loading-ellipsis"

Simply place a <EllipsisLoading /> inside of any compnent.

<View style={{ flex: 1 }}>
    <EllipsisLoading />
</View>

Styling Usage

EllipsisLoading is fully customizable using the styleDot, animationDelay, numberOfDots, minOpacity, and dotSize props.

Example usage to change dots color and spacing (as preview):

<View style={{ flex: 1 }}>
    <EllipsisLoading
        styleDot={{
          backgroundColor: "#6c5ce7",
          margin: 5,
        }}
    />
</View>

Documentation

EllipsisLoading Component

Name	Description	Default	Type
styleDot	Dot styles	undefined	ViewStyle
animationDelay	Delay for animation in milliseconds	300	Number
numberOfDots	Number of dot to display	3	Number
minOpacity	Opacity of dot animation	0.2	Number
dotSize	Size of the dots	12	Number