Skip to content

README.md

Latest commit

 

History

History
129 lines (92 loc) · 3.73 KB

README.md

File metadata and controls

129 lines (92 loc) · 3.73 KB

🎨 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

Preview

👀 Live Examples

🚀 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 ✨