react-glassmorphism-loader/README.md

A beautiful, customizable glassmorphism loader component for React 19+ with rotating lines animation and blur effects

# React Glassmorphism Loader

A beautiful, customizable glassmorphism loader component for React 19+ with rotating lines animation and blur effects.

## Features

- ✅ **React 19+ Compatible** - Works with the latest React versions
- ✅ **Zero Dependencies** - No external dependencies required
- ✅ **Fully Customizable** - Colors, sizes, text, animations, and more
- ✅ **Responsive Design** - Automatically adapts to different screen sizes
- ✅ **Glass Effect** - Beautiful backdrop blur effect
- ✅ **TypeScript Ready** - Full TypeScript support
- ✅ **Lightweight** - Minimal bundle size
- ✅ **Accessible** - ARIA labels and proper semantics

## Installation

```bash
npm install react-glassmorphism-loader
```

## Usage

### Basic Usage

```jsx
import React, { useState, useEffect } from 'react';
import ReactGlassLoader from 'react-glassmorphism-loader';

function App() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate loading
    setTimeout(() => setLoading(false), 3000);
  }, []);

  return (
    <div>
      {loading && <ReactGlassLoader />}
      <h1>Your App Content</h1>
    </div>
  );
}
```

### Advanced Usage

```jsx
import ReactGlassLoader from 'react-glassmorphism-loader';

function App() {
  return (
    <ReactGlassLoader
      text="Loading your data..."
      textColor="#ffffff"
      logoColor="#00ff88"
      backgroundColor="rgba(0, 0, 0, 0.8)"
      blurAmount="8px"
      fontSize="1.5rem"
      fontFamily="Arial, sans-serif"
      height="120"
      width="120"
      strokeWidth="6"
      animationDuration="1"
      responsive={true}
    />
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `text` | `string` | `"Data is loading, please wait"` | Loading text to display |
| `textColor` | `string` | `"rgb(6, 27, 120)"` | Color of the loading text |
| `logoColor` | `string` | `"rgb(6, 27, 120)"` | Color of the rotating lines |
| `color` | `string` | `undefined` | Backward compatibility - sets both text and logo color |
| `height` | `string` | `"106"` | Height of the loader in pixels |
| `width` | `string` | `"106"` | Width of the loader in pixels |
| `strokeWidth` | `string` | `"5"` | Width of the rotating lines |
| `animationDuration` | `string` | `"0.75"` | Duration of rotation animation in seconds |
| `fontSize` | `string` | `"1.7rem"` | Font size of the loading text |
| `fontFamily` | `string` | `"Syne Mono, monospace"` | Font family of the loading text |
| `fontWeight` | `string` | `"600"` | Font weight of the loading text |
| `backgroundColor` | `string` | `"rgba(128, 128, 128, 0.5)"` | Background color with opacity |
| `blurAmount` | `string` | `"4px"` | Amount of backdrop blur effect |
| `textMarginTop` | `string` | `"10px"` | Margin top for the text |
| `visible` | `boolean` | `true` | Whether the loader is visible |
| `responsive` | `boolean` | `true` | Enable responsive sizing |
| `mobileHeight` | `string` | `"80"` | Height on mobile devices |
| `mobileWidth` | `string` | `"80"` | Width on mobile devices |
| `tabletHeight` | `string` | `"90"` | Height on tablet devices |
| `tabletWidth` | `string` | `"90"` | Width on tablet devices |

## Examples

### Custom Colors
```jsx
<ReactGlassLoader
  textColor="#ff6b6b"
  logoColor="#4ecdc4"
  backgroundColor="rgba(0, 0, 0, 0.9)"
/>
```

### Large Loader
```jsx
<ReactGlassLoader
  height="150"
  width="150"
  strokeWidth="8"
  fontSize="2rem"
/>
```

### Fast Animation
```jsx
<ReactGlassLoader
  animationDuration="0.5"
  text="Loading quickly..."
/>
```

### Custom Font
```jsx
<ReactGlassLoader
  fontFamily="Roboto, sans-serif"
  fontWeight="400"
  fontSize="1.2rem"
/>
```

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

MIT © Abhishek Kumar

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## Issues

If you find any issues, please report them at: https://github.com/abhishekkumar/react-glass-loader/issues