Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-glassmorphism-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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