https://github.com/umerfarok/vibrant-loaders
A versatile collection of unique orange-themed loaders designed for shopping websites and e-commerce applications. These loaders are compatible with React, Next.js, and other JavaScript frameworks.
https://github.com/umerfarok/vibrant-loaders
loaders loaders-design loading loading-animations react shoping-loaders
Last synced: 2 months ago
JSON representation
A versatile collection of unique orange-themed loaders designed for shopping websites and e-commerce applications. These loaders are compatible with React, Next.js, and other JavaScript frameworks.
- Host: GitHub
- URL: https://github.com/umerfarok/vibrant-loaders
- Owner: umerfarok
- License: apache-2.0
- Created: 2024-07-28T21:26:05.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-08-02T14:04:36.000Z (11 months ago)
- Last Synced: 2025-04-27T12:26:42.734Z (2 months ago)
- Topics: loaders, loaders-design, loading, loading-animations, react, shoping-loaders
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vibrant-loaders
- Size: 1.32 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Vibrant Loaders
A versatile collection of unique orange-themed loaders designed for shopping websites and e-commerce applications. These loaders are compatible with React, Next.js, and other JavaScript frameworks.
A samlme useages for the loaders. https://loaders-showcase.vercel.app/
## Table of Contents
- [Vibrant Loaders](#vibrant-loaders)
- [Table of Contents](#table-of-contents)
- [Installation](#installation)
- [Usage](#usage)
- [Mini Loaders](#mini-loaders)
- [Loader Samples](#loader-samples)
- [Atom Loader](#atom-loader)
- [Bouncing Dots Loader](#bouncing-dots-loader)
- [Galaxy Loader](#galaxy-loader)
- [Mini Flip Loader](#mini-flip-loader)
- [Mini Pulse Loader](#mini-pulse-loader)
- [Mini Ripple Loader](#mini-ripple-loader)
- [Mini Spinner Loader](#mini-spinner-loader)
- [Pulse Grid Loader](#pulse-grid-loader)
- [Rotating Squares](#rotating-squares)
- [Wave Loader](#wave-loader)
- [ShopingLoader](#shopingloader)
## Installation
Install the package using npm:
```bash
npm install vibrant-loaders
```
## Usage
```jsx
import { AtomLoader, GalaxyLoader, WaveLoader } from 'vibrant-loaders';
function App() {
return (
);
}
```
### Mini Loaders
These mini loaders are designed to be compact and easily integrated into various parts of a UI. They can be used in buttons, forms, or any other small UI elements where you need to indicate loading or processing.
To use these mini loaders, you can import them from your package and use them in your React components like this:
```jsx
import {
MiniPulseLoader,
MiniDotsLoader,
MiniSpinnerLoader,
MiniFlipLoader,
MiniHourglassLoader,
MiniRippleLoader
} from 'vibrant-loaders';
function App() {
return (
Submit
Loading...
);
}
```
## Loader Samples
### Atom Loader
### Bouncing Dots Loader
### Galaxy Loader
### Mini Flip Loader
### Mini Pulse Loader
### Mini Ripple Loader
### Mini Spinner Loader
### Pulse Grid Loader
### Rotating Squares
### Wave Loader
### ShopingLoader
