Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@matheusdearaujo/react-native-loading-ellipsis

matheusdearaujo14MIT2.2.2TypeScript support: included

A fork of a simple library loading dots component.

react-native, react-component, react-native-component, react, react native, mobile, ios, android, ui, loading, loading-component, react-native-loading-ellipsis, ellipsis

readme

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.