react-native-animated-ellipsis

A simple, customizable animated dots component for use in React Native apps. Ideal for loading screens.

Showing:

Popularity

Downloads/wk

770

GitHub Stars

76

Maintenance

Last Commit

3yrs ago

Contributors

3

Package

Dependencies

2

Size (min+gzip)

1.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

React Native Animated Ellipsis

A simple, customizable animated dots component for use in React Native apps. Ideal for loading screens.

Kinda like iOS

Installation

npm install --save react-native-animated-ellipsis

Importing

import AnimatedEllipsis from 'react-native-animated-ellipsis';

Usage

Just include the component in the output of any other component like this:

render() {
  return (
    <View>
      <Text>
        Loading
        <AnimatedEllipsis />
      </Text>
    </View>
  );
}

which will get you something like this:

Basic Example

Props

Customize the number of dots, animation speed, and style using these props:

PropertyDescription
numberOfDotsThe number of dots you'd like to show. Defaults to 3.
animationDelayThe length in milliseconds of each phase of the animated. Defaults to 300.
minOpacityThe minimum opacity for the dots. Defaults to 0.
styleCSS to apply to the dots. It accepts any styles that a normal <Text /> component can take.

More Examples

Ten Dots Example

<AnimatedEllipsis numberOfDots={10} />

Complex Example

<AnimatedEllipsis numberOfDots={4}
                  animationDelay={150}
                  style={{
                    color: 'red',
                    fontSize: 72,
                  }}
/>

Kinda like iOS

<AnimatedEllipsis numberOfDots={3}
                  minOpacity={0.4}
                  animationDelay={200}
                  style={{
                    color: '#94939b',
                    fontSize: 100,
                    letterSpacing: -15,
                  }}
  />

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100