All Projects → ashutosh1919 → react-awesome-loaders

ashutosh1919 / react-awesome-loaders

Licence: MIT License
🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-awesome-loaders

Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (+73.97%)
Mutual labels:  progress, loader, react-components, spinner, spinners
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+430.14%)
Mutual labels:  progress, loader, spinner, spinners
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (-13.01%)
Mutual labels:  progress, css3, loader, spinner
Vue Wait
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Stars: ✭ 1,869 (+1180.14%)
Mutual labels:  progress, loader, spinner, loaders
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: ✭ 21 (-85.62%)
Mutual labels:  progress, loader, spinner, spinners
spinnies
Node.js module to create and manage multiple spinners in command-line interface programs
Stars: ✭ 111 (-23.97%)
Mutual labels:  progress, spinner, spinners
React Spinners Kit
A collection of loading spinners with React.js
Stars: ✭ 158 (+8.22%)
Mutual labels:  react-components, spinner, spinners
Aframe Preloader Component
A preloading bar that automatically displays while scene assets load.
Stars: ✭ 27 (-81.51%)
Mutual labels:  loader, spinner, spinners
vue-spinners-css
Amazing collection of Vue spinners components with pure css.
Stars: ✭ 50 (-65.75%)
Mutual labels:  progress, spinners, loaders
Text Spinners
Pure text, CSS only, font independent, inline loading indicators
Stars: ✭ 2,728 (+1768.49%)
Mutual labels:  loader, spinner, loaders
React Spinners
A collection of loading spinner components for react
Stars: ✭ 2,054 (+1306.85%)
Mutual labels:  loader, spinners, react-spinners
react-rounder
A collection of rounding components based on styled-components
Stars: ✭ 69 (-52.74%)
Mutual labels:  spinners, loaders, react-spinner
Swiftloader
A simple and beautiful activity indicator written in Swift
Stars: ✭ 116 (-20.55%)
Mutual labels:  progress, loader, spinner
Alive Progress
A new kind of Progress Bar, with real-time throughput, ETA, and very cool animations!
Stars: ✭ 2,940 (+1913.7%)
Mutual labels:  progress, spinner, spinners
InstagramActivityIndicator
Activity Indicator similar to Instagram's
Stars: ✭ 49 (-66.44%)
Mutual labels:  loader, spinner
react-native-spinner-button
React Native button component with multiple animated spinners
Stars: ✭ 105 (-28.08%)
Mutual labels:  spinner, loaders
react-loading-icons
A TypeScript-React edition of Sam Herbert's amazing SVG Loaders.
Stars: ✭ 32 (-78.08%)
Mutual labels:  loaders, react-loader
SVGLoadersPack-Android
Android SVGLoadersPack - SVG animations and Loaders in Android
Stars: ✭ 27 (-81.51%)
Mutual labels:  loader, loaders
react-sweet-progress
A way to quickly add a progress bar to react app 🌈
Stars: ✭ 250 (+71.23%)
Mutual labels:  progress, css3
ProBar
this script will allow you to configure a progress bar with a timer with other options
Stars: ✭ 0 (-100%)
Mutual labels:  progress, css3

React Awesome Loaders

🚀 High quality, super responsive and
completely customisable Loading Animations.

NodeJS NPM Made With Gatsby code style: prettier
Netlify Status Build Status License Maintenance Website Price

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 us on GitHub — it helps!
To view a documentation website, click here

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

npm install react-awesome-loaders

Import And Use

import { LoaderName } from "react-awesome-loaders"
...
function LoadingComponent(props) {
    return (
        ...
        <LoaderName {...passParametersToCustomise} />
        ...
    );
}
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.

License 📄

This project is licensed under the MIT License - see the LICENSE.md 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. Please, take a look.

If you can help us with these. Please don't hesitate to open an pull request or issue. If you want to know about how to create pull request, then please refer to this youtube playlist.

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.

paypal Buy Me A Coffee

You can look at the Appreciate page on website to know more about how you can help the project.

Contributors

Thanks goes to these wonderful people (emoji key):


Ashutosh Hathidara

💻 📖 🎨 🤔 🚧

Satyam Pandey

💻

Julius

📖

This project follows the 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.

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].