MerixFlow ✨

A colorful collection of creative, modern, and lightweight React loading animations.

Built for developers who want beautiful loaders without writing animation CSS from scratch.

✨ Features

• 🎨 35 unique loaders
• 🌈 Colorful animations
• ⚡ Lightweight
• ⚛️ Built for React
• 📦 Easy npm installation
• 🔧 Simple component API
• 📱 Responsive
• ♿ Accessible loading state
• 🚫 No separate CSS import required

📦 Installation

npm install merix-flow



🚀 Usage

Import any loader directly from merix-flow:

import { MagicLoader } from "merix-flow";


function App() {
  return <MagicLoader />;
}


export default App;

No additional CSS import is required.

📏 Sizes

Most loaders support three sizes:

<MagicLoader size="small" />
<MagicLoader size="medium" />
<MagicLoader size="large" />

The default size is medium.

🎨 Available Loaders
Basic
Spinner
DotsLoader
PulseLoader
Colorful
RainbowLoader
BubblesLoader
WaveLoader
Creative
OrbitLoader
LiquidLoader
AuroraLoader
GalaxyLoader
DNAloader
OrbitDotsLoader
Tech
NeonLoader
MatrixLoader
MeteorLoader
RadarLoader
Nature
FireLoader
HeartLoader
SnowLoader
FlowerLoader
WaterDropLoader
LeafLoader
Weather
CloudLoader
SunLoader
MoonLoader
Music
EqualizerLoader
Utility
HourglassLoader
TypingLoader
Games & Space
PacmanLoader
GameLoader
RocketLoader
✨ Pro
ParticleLoader
PortalLoader
MorphLoader
MagicLoader


💡 Example
import {
  Spinner,
  RainbowLoader,
  ParticleLoader,
  PortalLoader,
  MagicLoader
} from "merix-flow";


function LoadingExample() {
  return (
    <>
      <Spinner />
      <RainbowLoader />
      <ParticleLoader />
      <PortalLoader />
      <MagicLoader />
    </>
  );
}


export default LoadingExample;
🛠️ Built With
React
JavaScript
CSS
Vite

📄 License
MIT

### Author
Created with ❤️ as part of the MerixFlow open-source project.