{"id":13456384,"url":"https://github.com/ashutosh1919/react-awesome-loaders","last_synced_at":"2025-04-04T09:09:33.014Z","repository":{"id":49745880,"uuid":"327222969","full_name":"ashutosh1919/react-awesome-loaders","owner":"ashutosh1919","description":"🚀  High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.","archived":false,"fork":false,"pushed_at":"2024-08-11T11:30:12.000Z","size":20850,"stargazers_count":269,"open_issues_count":6,"forks_count":36,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-10-30T08:18:02.405Z","etag":null,"topics":["animation","animation-library","awesome-loaders","css3","html5","loader","loaders","progress","react","react-awesome-loaders","react-components","react-css-modules","react-loader","react-loaders","react-loaders-kit","react-spinner","react-spinners","reactjs","spinner","spinners"],"latest_commit_sha":null,"homepage":"https://awesome-loaders.netlify.app","language":"JavaScript","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/ashutosh1919.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"ashutosh1919","patreon":"devsense","open_collective":"react-awesome-loaders"}},"created_at":"2021-01-06T06:36:41.000Z","updated_at":"2024-10-19T16:18:55.000Z","dependencies_parsed_at":"2024-01-14T06:50:44.347Z","dependency_job_id":"4b6384dd-19a4-4b6e-8558-18c994fda58c","html_url":"https://github.com/ashutosh1919/react-awesome-loaders","commit_stats":{"total_commits":47,"total_committers":5,"mean_commits":9.4,"dds":"0.14893617021276595","last_synced_commit":"cb1a7bff86f87db0120980ee2c40590f71bfe1b6"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashutosh1919%2Freact-awesome-loaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashutosh1919%2Freact-awesome-loaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashutosh1919%2Freact-awesome-loaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashutosh1919%2Freact-awesome-loaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ashutosh1919","download_url":"https://codeload.github.com/ashutosh1919/react-awesome-loaders/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247149502,"owners_count":20891954,"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","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":["animation","animation-library","awesome-loaders","css3","html5","loader","loaders","progress","react","react-awesome-loaders","react-components","react-css-modules","react-loader","react-loaders","react-loaders-kit","react-spinner","react-spinners","reactjs","spinner","spinners"],"created_at":"2024-07-31T08:01:20.994Z","updated_at":"2025-04-04T09:09:32.995Z","avatar_url":"https://github.com/ashutosh1919.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ashutosh1919","https://patreon.com/devsense","https://opencollective.com/react-awesome-loaders","https://www.paypal.com/paypalme/devsense19","https://www.buymeacoffee.com/devsense19"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e \n    \u003cimg src=\"./doc/images/logo-manifest.png\" align=\"center\" height=\"150\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eReact Awesome Loaders\u003c/h1\u003e \n\u003ch3 align=\"center\"\u003e 🚀 High quality, super responsive and \u003c/br\u003e completely customisable Loading Animations. \u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://hits.seeyoufarm.com\"\u003e\u003cimg src=\"https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fashutosh1919%2Freact-awesome-loaders\u0026count_bg=%2379C83D\u0026title_bg=%23555555\u0026icon=\u0026icon_color=%23E7E7E7\u0026title=hits\u0026edge_flat=false\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://nodejs.org/en/blog/release/v12.18.3/\"\u003e\u003cimg alt=\"NodeJS\" src=\"https://img.shields.io/badge/node-12.18.3-important?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/npm/v/6.14.6\"\u003e\u003cimg alt=\"NPM\" src=\"https://img.shields.io/badge/npm-6.14.6-61DAFB?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.gatsbyjs.com/\"\u003e\u003cimg alt=\"Made With Gatsby\" src=\"https://img.shields.io/badge/made%20with-gatsby-blueviolet?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003cbr/\u003e\n  \u003ca href=\"https://app.netlify.com/sites/awesome-loaders/deploys\"\u003e\u003cimg alt=\"Netlify Status\" src=\"https://api.netlify.com/api/v1/badges/d9df8e0f-f743-488a-bebb-880c81383d35/deploy-status?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/badges/badgerbadgerbadger\"\u003e\u003cimg alt=\"Build Status\" src=\"http://img.shields.io/travis/badges/badgerbadgerbadger.svg?style=flat-square?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003ca href=\"http://badges.mit-license.org/\"\u003e\u003cimg alt=\"License\" src=\"http://img.shields.io/:license-mit-blue.svg?style=flat-square?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/ashutosh1919/react-awesome-loaders/commits/main\"\u003e\u003cimg alt=\"Maintenance\" src=\"https://img.shields.io/badge/maintained-yes-green.svg?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://awesome-loaders.netlify.app/\"\u003e\u003cimg alt=\"Website\" src=\"https://img.shields.io/badge/website-up-yellow?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://img.shields.io/badge/price-free-ff69b4\"\u003e\u003cimg alt=\"Price\" src=\"https://img.shields.io/badge/price-free-ff69b4?style=flat-square\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eLoved the project? Please consider \u003ca href=\"https://www.paypal.com/paypalme/devsense19\"\u003edonating\u003c/a\u003e to help it improve!\u003c/p\u003e\n\u003cp align=\"center\"\u003eSee the official launch of the project and demo on my \u003ca href=\"https://youtu.be/_1mDp8ZKfgY\"\u003eYouTube Channel\u003c/a\u003e.\u003c/p\u003e\n\u003cp align=\"center\"\u003eIf you want to discuss about something, then you can ask on my \u003ca href=\"https://discord.com/invite/GkcbM5bwZr\"\u003eDiscord Server\u003c/a\u003e.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e \n    \u003ca href=\"https://awesome-loaders.netlify.app/\" target=\"_blank\"\u003e\n    \u003cimg src=\"doc/images/showcase.gif\"\u003e\u003c/img\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n:star: Star us on GitHub — it helps!  \nTo view a documentation website, [click here](https://awesome-loaders.netlify.app/)\n\n# Getting Started 🎬\n\nThe easiest way to use one of the loaders from **Awesome Loaders** is to install the NPM package and import the particular loader to use it.\n\n## Install NPM Package\n\n```bash\nnpm install react-awesome-loaders\n```\n\n## Import And Use\n\n```jsx highlight={1,6}\nimport { LoaderName } from \"react-awesome-loaders\"\n...\nfunction LoadingComponent(props) {\n    return (\n        ...\n        \u003cLoaderName {...passParametersToCustomise} /\u003e\n        ...\n    );\n}\nexport default LoadingComponent\n```\n\nThe loaders are very flexible to import and use wherever you want and in any web framework that uses NPM.  \nThe loaders are auto-responsive. i.e. The size of loader automatically adjusts itself on smaller screen sizes.  \nOfcourse, you can set different sizes for different screens by passing props `desktopSize` and `mobileSize`.  \nRead the complete in detail documentation on the [project website](https://awesome-loaders.netlify.app/).\n\n# License 📄\n\nThis project is licensed under the MIT License - see the [LICENSE.md](https://github.com/ashutosh1919/react-awesome-loaders/blob/main/LICENSE) file for details.\nYou can use this project for personal as well as commercial purposes. But if you think you have modified the project and built something really good, we will humbly request you to raise the pull request and share with the opensource community.\n\n# Contributing 💡\n\nWe have provided detailed description on how \u0026 what to contribute to this project on [website](https://awesome-loaders.netlify.app/docs/contributing/). Please, take a look.\n\nIf you can help us with these. Please don't hesitate to open an [pull request](https://github.com/ashutosh1919/react-awesome-loaders/pulls) or [issue](https://github.com/ashutosh1919/react-awesome-loaders/issues). If you want to know about how to create pull request, then please refer to [this youtube playlist](https://youtube.com/playlist?list=PLR0CKdeR_FyscaxEksDVXc4UQvlOFLYS6).\n\n# Donate 💉\n\nI open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, this takes time. You can use this project for personal and commercial purpose for free.\n\nHowever, if you are using this project and happy with it or just want to encourage me to continue creating stuff, there are few ways you can do it :-\n\n- Giving proper credit when you use this on your project, linking back to it :D\n- Starring, giving shoutouts and sharing the project 🚀\n- You can make one-time donations by clicking the buttons below. I'll probably buy an amazing workstation which will help me build more aggressively.\n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/paypalme/devsense19) \u003ca href=\"https://www.buymeacoffee.com/devsense19\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-red.png\" alt=\"Buy Me A Coffee\" height=\"50px\" \u003e\u003c/a\u003e\n\nYou can look at the [Appreciate](https://awesome-loaders.netlify.app/docs/appreciate/) page on website to know more about how you can help the project.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ashutosh1919\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/20843596?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAshutosh Hathidara\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ashutosh1919/react-awesome-loaders/commits?author=ashutosh1919\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/ashutosh1919/react-awesome-loaders/commits?author=ashutosh1919\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#design-ashutosh1919\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"#ideas-ashutosh1919\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#maintenance-ashutosh1919\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/satyampandeygit\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/69512057?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSatyam Pandey\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ashutosh1919/react-awesome-loaders/commits?author=satyampandeygit\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/KnechtNoobrecht\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/56320300?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJulius\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ashutosh1919/react-awesome-loaders/commits?author=KnechtNoobrecht\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n# References 👏🏻\n\nWe have used many of the amazing resources to create this project and it is difficult to display all those resources here on github repository.\n\nThat is why we have displayed almost all used dependencies on our [website](https://awesome-loaders.netlify.app/docs/references/).\n\nAlso, I have also mentioned the link and profile url of the original concept creators of the loaders at the bottom of corresponding loader documentation on website.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashutosh1919%2Freact-awesome-loaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashutosh1919%2Freact-awesome-loaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashutosh1919%2Freact-awesome-loaders/lists"}