{"id":21088152,"url":"https://github.com/mrakesh0608/react-native-loading-dots","last_synced_at":"2025-09-05T11:21:02.168Z","repository":{"id":152716730,"uuid":"625909881","full_name":"mrakesh0608/react-native-loading-dots","owner":"mrakesh0608","description":"A Loading Dots Component for React Native","archived":false,"fork":false,"pushed_at":"2023-04-13T19:16:01.000Z","size":19,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-14T17:23:47.744Z","etag":null,"topics":["loading-dots","loading-ellipsis","npm-package","react-native","react-native-loading"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/@mrakesh0608/react-native-loading-dots","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrakesh0608.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-10T11:33:51.000Z","updated_at":"2024-07-09T15:00:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"f663db90-aee1-4d07-b1a1-4b66f4f042a4","html_url":"https://github.com/mrakesh0608/react-native-loading-dots","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/mrakesh0608/react-native-loading-dots","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrakesh0608%2Freact-native-loading-dots","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrakesh0608%2Freact-native-loading-dots/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrakesh0608%2Freact-native-loading-dots/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrakesh0608%2Freact-native-loading-dots/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrakesh0608","download_url":"https://codeload.github.com/mrakesh0608/react-native-loading-dots/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrakesh0608%2Freact-native-loading-dots/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273748672,"owners_count":25160878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loading-dots","loading-ellipsis","npm-package","react-native","react-native-loading"],"created_at":"2024-11-19T21:15:52.705Z","updated_at":"2025-09-05T11:21:02.119Z","avatar_url":"https://github.com/mrakesh0608.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eWelcome to @mrakesh0608/react-native-loading-dots 👋\u003c/h1\u003e\n\n\u003cp align='center'\u003eA Loading Dots Component for React Native\u003c/p\u003e\n\n\u003cp align='center'\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@mrakesh0608/react-native-loading-dots\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/@mrakesh0608/react-native-loading-dots.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/mrakesh0608/react-native-loading-dots/blob/master/LICENSE\" target=\"_blank\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/license-MIT-yellow.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@mrakesh0608/react-native-loading-dots\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dt/@mrakesh0608/react-native-loading-dots\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Prerequisites - Peer Dependencies\n* @types/react \u003e= 18.0.0\n* react \u003e= 18.0.0 \n* react-native \u003e= 0.70.0\n* typescript \u003e= 4.9.0\n\n## Install\n```\nnpm i @mrakesh0608/react-native-loading-dots\n```\n## Usage\n\u003cdiv align='right'\u003e\n  \u003ca href=\"https://snack.expo.dev/@mrakesh0608/react-native-loading-dots-\" target=\"_blank\"\u003e\n    \u003cspan\u003eTry this example on Expo Snack\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n```\nimport { View, Text, ScrollView } from 'react-native';\nimport { LoadingDots } from '@mrakesh0608/react-native-loading-dots';\n\nconst list = ['elastic', 'flashing', 'pulse', 'ping', 'typing'];\n\nexport default function App() {\n  return (\n    \u003cScrollView style={{ justifyContent: 'center', alignItems: 'center' }}\u003e\n      {list.map((item, index) =\u003e (\n        \u003cView\n          key={index}\n          style={{\n            marginVertical: 12,\n          }}\u003e\n          \u003cLoadingDots\n            animation={item}\n            containerStyle={{\n              backgroundColor: 'lightgray',\n              padding: 18, \n              borderRadius: 10,\n            }}\n          /\u003e\n          \u003cText style={{ textAlign: 'center' }}\u003e{item}\u003c/Text\u003e\n        \u003c/View\u003e\n      ))}\n    \u003c/ScrollView\u003e\n  );\n}\n```\n\n## Styling Options\n\nA list of available props to pass into the `\u003cLoadingDots /\u003e` component:\n\n| Props          | Type   | Default | Units | Description                                                                         |\n| -------------- | ------ | ------- | ----- | ----------------------------------------------------------------------------------- |\n| animation      | String | 'pulse' |   -   | Animation style :  `elastic`, `flashing`, `ping`, `pulse`, `typing`                 |\n| color          | String | 'black' |   -   | Color of dots                                                                       |\n| containerStyle | Style  |    -    |   -   | Container Style for Loading Dots top level component                                |\n| dots           | Number |    3    |   -   | Number of dots to be displayed                                                      |\n| delay          | Number |   280   |  ms   | Delay between the two dots                                                          |\n| size           | Number |   10    |  px   | Size of dots                                                                        |\n| spacing        | Number |    2    |  px   | Space between dots                                                                  |\n\n## Author\n\u003cdiv style=\"display:flex;align-items: center;\"\u003e\n    \u003cimg src='https://avatars.githubusercontent.com/u/101246871?v=sd4' alt = '👤' width='16px' height='16px'\u003e\n    \u003cb style='margin-left:10px;'\u003eMerugu Rakesh\u003c/b\u003e\n\u003c/div\u003e\n\n* Website: [mrakesh.vercel.app](https://mrakesh.vercel.app)\n* Github: [@mrakesh0608](https://github.com/mrakesh0608)\n* LinkedIn: [@mrakesh0608](https://linkedin.com/in/mrakesh0608)\n\n## 🤝 Contributing\nContributions, issues and feature requests are welcome!\u003cbr /\u003eFeel 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).\n\n## 💖 Show your support\nGive a ⭐️ if this project helped you!\n\n## 📝 License\nCopyright © 2023 [Merugu Rakesh](https://github.com/mrakesh0608).\u003cbr /\u003e\nThis project is [MIT](https://github.com/mrakesh0608/react-native-loading-dots/blob/master/LICENSE) licensed.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrakesh0608%2Freact-native-loading-dots","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrakesh0608%2Freact-native-loading-dots","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrakesh0608%2Freact-native-loading-dots/lists"}