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 |

How to contribute

Read our contribution guide.

Contributors

Author

| @matheusdearaujo | | :-----------------------------------------------------------------------------------------------------------------------------------------: |

LICENSE

This repository use MIT License.