# react-native-animated-ellipsis

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

Latest version **2.0.0** (published 2019-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-animated-ellipsis
pnpm add react-native-animated-ellipsis
yarn add react-native-animated-ellipsis
bun add react-native-animated-ellipsis
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2019-03-18 |
| First published | 2017-06-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Casey Brant |
| Maintainers | abott |

## Links

- npm: https://www.npmjs.com/package/react-native-animated-ellipsis
- Repository: https://github.com/adorableio/react-native-animated-ellipsis
- Issues: https://github.com/adorableio/react-native-animated-ellipsis/issues
- npm.io page: https://npm.io/package/react-native-animated-ellipsis

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [babel-preset-stage-2](https://npm.io/package/babel-preset-stage-2.md) ^6.24.1

## Recent versions

- 2.0.0 (latest) — 2019-03-18
- 1.1.0 — 2017-07-10
- 1.0.0 — 2017-06-06
- 0.1.3 — 2017-06-06
- 0.1.2 — 2017-06-06
- 0.1.1 — 2017-06-06
- 0.1.0 — 2017-06-06
- 0.0.2 — 2017-06-05
- 0.0.1 — 2017-06-05

## README

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

![Kinda like iOS](https://raw.githubusercontent.com/wiki/adorableio/react-native-animated-ellipsis/images/example_ios_ish.gif)


## Installation
```shell
npm install --save react-native-animated-ellipsis
```

## Importing
```js
import AnimatedEllipsis from 'react-native-animated-ellipsis';
```

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

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

which will get you something like this:

![Basic Example](https://raw.githubusercontent.com/wiki/adorableio/react-native-animated-ellipsis/images/example_basic.gif)


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

| Property | Description |
|----------|-------------|
| **`numberOfDots`** | The number of dots you'd like to show. Defaults to **3**. |
| **`animationDelay`** | The length in milliseconds of each phase of the animated. Defaults to **300**. |
| **`minOpacity`** | The minimum opacity for the dots. Defaults to **0**. |
| **`style`** | CSS to apply to the dots. It accepts any styles that a normal `<Text />` component can take. |


## More Examples

![Ten Dots Example](https://raw.githubusercontent.com/wiki/adorableio/react-native-animated-ellipsis/images/example_ten_dots.gif)

```jsx
<AnimatedEllipsis numberOfDots={10} />
```

------

![Complex Example](https://raw.githubusercontent.com/wiki/adorableio/react-native-animated-ellipsis/images/example_four_red_dots.gif)

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

------

![Kinda like iOS](https://raw.githubusercontent.com/wiki/adorableio/react-native-animated-ellipsis/images/example_ios_ish.gif)

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

---
_Source: https://npm.io/package/react-native-animated-ellipsis · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._