GlassyLoader 💎

Professional Loading UI Suite for Ruby on Rails
Developed by Shiboshree Roy

---

GlassyLoader is a premium Ruby on Rails gem providing an elite collection of 110+ glassmorphism animations and 20+ designer themes. Built for high-end production applications, it combines sophisticated design (Next.js, Apple, Luxury Mesh) with realistic UX patterns (Flicker Prevention, ARIA Accessibility).

🚀 Key Features

• 💎 110+ Animations: From classic spinners to 3D folding-cube and infinity loops.
• 🌌 Designer Themes: Pro themes including apple, cyberpunk, midnight-gold, and liquid-mesh.
• 🦴 Realistic Skeletons: One-line layout presets for feed, profile, and grid.
• ⏳ UX Pro Patterns: Built-in delay and min_duration to eliminate loading flickers.
• 🌑 Adaptive Theming: Native support for Dark/Light mode and system preferences.
• 📱 Mobile Optimized: Fully responsive scaling and touch-friendly interaction.
• 🖱 Interactive 3D Tilt: Mouse-reactive glass elements for an ultra-premium feel.
• 🔘 Button Loaders: Integrated loading states for buttons and forms.
• ⚡ Staggered Skeletons: Organic entrance animations for multi-item layouts.
• 🍞 Glassy Toasts: High-end background loading notifications.

---

🛠 Installation

Add this line to your application's Gemfile:

gem 'glassy_loader'

And then execute:

$ bundle install

Include Assets

In your application.css:

/*= require glassy_loader/main */

In your application.js:

//= require glassy_loader/loader

---

⚙️ Global Configuration

Set your project-wide defaults in config/initializers/glassy_loader.rb:

GlassyLoader.configure do |config|
  config.theme = :apple         # Options: :glassy, :apple, :cyberpunk, :midnight_gold, :liquid_mesh...
  config.animation = :"spin-1"   # Options: :"spin-1"..30, :"dots-1"..30, :"pulse-1"..22, :"folding-cube"...
  config.duration = nil         # Default auto-hide time in seconds
end

---

📖 Usage Guide

1. The Pro Loader (Flicker-Free)

The most realistic way to load data. It waits 200ms before showing (skipping ultra-fast requests) and ensures it stays visible for at least 800ms to be readable.

<%= glassy_loader_tag id: "main-loader", delay: 0.2, min_duration: 0.8, theme: :apple %>

2. Luxury Mesh & Premium Animations

For high-end landing pages or dashboards.

<!-- 3D Folding Cube with Animated Mesh Background -->
<%= glassy_loader_tag animation: :"folding-cube", theme: :liquid_mesh, message: "INITIALIZING..." %>

<!-- SVG Infinity Ribbon with Deep Gold Theme -->
<%= glassy_loader_tag animation: :infinity, theme: :midnight_gold %>

3. Professional Skeleton Layouts

Use realistic placeholders that match your content structure to improve perceived performance.

<!-- Feed Pattern (Avatar + Stacked Lines) -->
<%= glassy_skeleton_layout type: :feed, items: 3 %>

<!-- Profile Pattern (Large Avatar + Centered Text) -->
<%= glassy_skeleton_layout type: :profile %>

<!-- Grid Pattern -->
<%= glassy_skeleton_layout type: :grid, items: 6 %>

### 4. Premium UI/UX Components

#### Glassy Button Loader
Perfect for "Submit" or "Buy Now" buttons.
```erb
<%= glassy_button_loader_tag "Confirm Payment", id: "pay-btn", theme: :gold %>

// Toggle loading state
GlassyLoader.toggleButton('pay-btn', true);

Glassy Loading Toast

For non-intrusive background tasks (syncing, uploading).

<%= glassy_toast_tag "Uploading 4 files...", id: "upload-toast", theme: :apple %>

// Show with auto-hide duration (in seconds)
GlassyLoader.showToast('upload-toast', { duration: 5 });

---

---

🕹 JavaScript API

Control your loaders programmatically for advanced workflows.

Visibility & States

// Show with 3D tilt effect enabled
GlassyLoader.show('my-loader');
GlassyLoader.initInteractive('my-loader');

// Morph to Success state (shows checkmark + message)
GlassyLoader.success('my-loader', 'Payment Complete!');

// Morph to Error state (shows cross + message)
GlassyLoader.error('my-loader', 'Transaction Failed');

Progress Bar Control

// Automatic randomized progress (YouTube style)
GlassyLoader.startProgress('main-progress-bar');

// Direct manual update (Real-world data streams)
GlassyLoader.updateProgress('main-progress-bar', 75);

// Complete and hide
GlassyLoader.stopProgress('main-progress-bar');

---

🎨 Themes Reference

Theme	Vibe	Key Features
:apple	Minimalist	High blur (25px), soft white/gray.
:cyberpunk	Tech/Neon	Neon green, high contrast, hard edges.
:midnight_gold	Luxury	Mesh radial gradients, amber & gold accents.
:liquid_mesh	Living UI	Animated shifting gradients, ultra-modern.
:holographic	Creative	Multi-color shimmer, vibrant.

---

📜 License & Credits

• Developer: Shiboshree Roy
  
• License: The gem is available as open source under the terms of the MIT License.

For bug reports or feature requests, please visit the GitHub Repository.