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

npm install react-glassmorphism-loader

Usage

Basic Usage

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

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

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

Large Loader

<ReactGlassLoader
  height="150"
  width="150"
  strokeWidth="8"
  fontSize="2rem"
/>

Fast Animation

<ReactGlassLoader
  animationDuration="0.5"
  text="Loading quickly..."
/>

Custom Font

<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