https://github.com/mrakesh0608/react-native-loading-dots
A Loading Dots Component for React Native
https://github.com/mrakesh0608/react-native-loading-dots
loading-dots loading-ellipsis npm-package react-native react-native-loading
Last synced: 3 months ago
JSON representation
A Loading Dots Component for React Native
- Host: GitHub
- URL: https://github.com/mrakesh0608/react-native-loading-dots
- Owner: mrakesh0608
- License: mit
- Created: 2023-04-10T11:33:51.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-04-13T19:16:01.000Z (over 2 years ago)
- Last Synced: 2025-08-14T17:23:47.744Z (4 months ago)
- Topics: loading-dots, loading-ellipsis, npm-package, react-native, react-native-loading
- Language: TypeScript
- Homepage: https://npmjs.com/package/@mrakesh0608/react-native-loading-dots
- Size: 18.6 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Welcome to @mrakesh0608/react-native-loading-dots 👋
A Loading Dots Component for React Native
## Prerequisites - Peer Dependencies
* @types/react >= 18.0.0
* react >= 18.0.0
* react-native >= 0.70.0
* typescript >= 4.9.0
## Install
```
npm i @mrakesh0608/react-native-loading-dots
```
## Usage
```
import { View, Text, ScrollView } from 'react-native';
import { LoadingDots } from '@mrakesh0608/react-native-loading-dots';
const list = ['elastic', 'flashing', 'pulse', 'ping', 'typing'];
export default function App() {
return (
{list.map((item, index) => (
{item}
))}
);
}
```
## Styling Options
A list of available props to pass into the `` component:
| Props | Type | Default | Units | Description |
| -------------- | ------ | ------- | ----- | ----------------------------------------------------------------------------------- |
| animation | String | 'pulse' | - | Animation style : `elastic`, `flashing`, `ping`, `pulse`, `typing` |
| color | String | 'black' | - | Color of dots |
| containerStyle | Style | - | - | Container Style for Loading Dots top level component |
| dots | Number | 3 | - | Number of dots to be displayed |
| delay | Number | 280 | ms | Delay between the two dots |
| size | Number | 10 | px | Size of dots |
| spacing | Number | 2 | px | Space between dots |
## Author
Merugu Rakesh
* Website: [mrakesh.vercel.app](https://mrakesh.vercel.app)
* Github: [@mrakesh0608](https://github.com/mrakesh0608)
* LinkedIn: [@mrakesh0608](https://linkedin.com/in/mrakesh0608)
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/mrakesh0608/react-native-loading-dots/issues). You can also take a look at the [contributing guide](https://github.com/mrakesh0608/react-native-loading-dots/blob/master/CONTRIBUTING.md).
## 💖 Show your support
Give a ⭐️ if this project helped you!
## 📝 License
Copyright © 2023 [Merugu Rakesh](https://github.com/mrakesh0608).
This project is [MIT](https://github.com/mrakesh0608/react-native-loading-dots/blob/master/LICENSE) licensed.