🎨 React CSSFx Loading

Beautiful, lightweight loading animations for React - because users deserve delightful waiting experiences! ✨

Transform your loading states from boring to brilliant with this carefully curated collection of CSS-powered animations. Built as a React wrapper for the stunning CSSFx collection, this package brings you 14 gorgeous loading components that are both performant and pixel-perfect.

✨ Why Choose React CSSFx Loading?

• 🚀 Lightweight & Fast - Pure CSS animations with zero JavaScript overhead
• 🎯 Tree-shakable - Import only what you need to keep bundles small
• 🎨 Highly Customizable - Colors, sizes, timing - make it yours!
• 📱 Responsive Ready - Looks great on every device
• ♿ Accessible - Respects user preferences for reduced motion
• 🔧 TypeScript Support - Full type safety out of the box

🎬 See It In Action

👀 Live Examples

• 🌐 Interactive Demo - Try all components live!
• 📚 Storybook Documentation - Explore every prop and variation

🚀 Quick Start

Get up and running in seconds! Install with your favorite package manager:

# npm
npm install react-cssfx-loading

# yarn  
yarn add react-cssfx-loading

# pnpm
pnpm add react-cssfx-loading

# bun
bun add react-cssfx-loading

💫 Usage

It's as simple as import and drop! Here's how to get started:

import { BarWave } from "react-cssfx-loading";

// 🎯 Simple and clean
<BarWave />

// 🎨 Make it your own
<BarWave 
  color="#6366f1" 
  width="80px" 
  height="60px" 
  duration="2s" 
/>

// 🔧 Full HTML support - it's just a div with superpowers!
<BarWave 
  onClick={() => console.log("Loading animation clicked!")} 
  className="my-spinner"
  style={{ margin: "auto" }}
  aria-label="Loading content..."
/>

🎛️ Props & Customization

Every component is built with flexibility in mind. Here's what you can customize:

Prop	Type	Default	Description
color	string	#0d6efd	🎨 Animation color - any valid CSS color
width	string	varies	📏 Component width (e.g., "50px", "3rem")
height	string	varies	📐 Component height (e.g., "50px", "3rem")
duration	string	1s	⏱️ Animation speed (e.g., "2s", "500ms")
className	string	-	🏷️ Additional CSS classes
style	CSSProperties	-	💅 Inline styles object
...rest	HTMLDivElement	-	🔧 All standard HTML div attributes

🎨 Component Gallery

Choose from 14 beautifully crafted loading animations:

🌊 Motion & Flow

• BarWave - Elegant wave motion
• BouncingBalls - Playful bouncing spheres
• FadingBalls - Smooth fade transitions
• FadingDots - Subtle dot sequence

🔄 Rotational

• CircularProgress - Classic progress circle
• Coin - Charming coin flip effect
• Hypnosis - Mesmerizing spiral
• Ring - Clean rotating ring
• Spin - Simple rotation
• TwinSpin - Dual rotation magic

📦 Geometric

• FlippingSquare - Dynamic square flip
• SpinStretch - Stretching rotation
• FillingBottle - Liquid fill animation
• Messaging - Chat bubble effect

---

🤝 Contributing

We love contributions! Feel free to:

• 🐛 Report bugs
• 💡 Suggest new animations
• 🔧 Submit pull requests
• ⭐ Star the repo if you find it helpful!

📄 License

MIT © napthedev

---

Made with ❤️ for the React community

Making loading states delightful, one animation at a time ✨