Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashutosh1919/react-awesome-loaders
🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.
https://github.com/ashutosh1919/react-awesome-loaders
List: react-awesome-loaders
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
Last synced: 5 days ago
JSON representation
🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.
- Host: GitHub
- URL: https://github.com/ashutosh1919/react-awesome-loaders
- Owner: ashutosh1919
- License: mit
- Created: 2021-01-06T06:36:41.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-08-11T11:30:12.000Z (4 months ago)
- Last Synced: 2024-10-30T08:18:02.405Z (about 1 month ago)
- 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
- Language: JavaScript
- Homepage: https://awesome-loaders.netlify.app
- Size: 19.9 MB
- Stars: 269
- Watchers: 6
- Forks: 36
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-ccamel - ashutosh1919/react-awesome-loaders - 🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code. (JavaScript)
- awesome - ashutosh1919/react-awesome-loaders - 🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code. (JavaScript)
README
React Awesome Loaders
🚀 High quality, super responsive and completely customisable Loading Animations.
Loved the project? Please consider donating to help it improve!
See the official launch of the project and demo on my YouTube Channel.
If you want to discuss about something, then you can ask on my Discord Server.
:star: Star us on GitHub — it helps!
To view a documentation website, [click here](https://awesome-loaders.netlify.app/)
# Getting Started 🎬
The 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.
## Install NPM Package
```bash
npm install react-awesome-loaders
```
## Import And Use
```jsx highlight={1,6}
import { LoaderName } from "react-awesome-loaders"
...
function LoadingComponent(props) {
return (
...
...
);
}
export default LoadingComponent
```
The loaders are very flexible to import and use wherever you want and in any web framework that uses NPM.
The loaders are auto-responsive. i.e. The size of loader automatically adjusts itself on smaller screen sizes.
Ofcourse, you can set different sizes for different screens by passing props `desktopSize` and `mobileSize`.
Read the complete in detail documentation on the [project website](https://awesome-loaders.netlify.app/).
# License 📄
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/ashutosh1919/react-awesome-loaders/blob/main/LICENSE) file for details.
You 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.
# Contributing 💡
We have provided detailed description on how & what to contribute to this project on [website](https://awesome-loaders.netlify.app/docs/contributing/). Please, take a look.
If 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).
# Donate 💉
I 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.
However, 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 :-
- Giving proper credit when you use this on your project, linking back to it :D
- Starring, giving shoutouts and sharing the project 🚀
- 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.
[](https://www.paypal.com/paypalme/devsense19) 
You 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.
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Ashutosh Hathidara
💻 📖 🎨 🤔 🚧
Satyam Pandey
💻
Julius
📖
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
# References 👏🏻
We have used many of the amazing resources to create this project and it is difficult to display all those resources here on github repository.
That is why we have displayed almost all used dependencies on our [website](https://awesome-loaders.netlify.app/docs/references/).
Also, 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.