glassy_loader 1.2.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 11b64a3ac54fffda9abe80e4f0fbd0a047c6f4231609ae10ad36d06a0e1b69a0
+  data.tar.gz: 0e2fdc86d23dace9beb09ee02a44a84fb4070067a59f41a0516b136cab7d09f1
+SHA512:
+  metadata.gz: c6034f62ca424e96314ee79ebf93c8193fda0447c5473c37c5fd28de734888ca0c50cff05f8691d05970b745958668fa903134141bcbef453788e7506b505fe0
+  data.tar.gz: 96e8c865533349801e356f7e8035989e8b4eb799a2c7a8c2e6efb7a9da2802e5aaf2bb39324273648139204305f6d4463a717266c466712b9740258cae4e8fdc

data/CHANGELOG.md

@@ -0,0 +1,33 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.2.0] - 2026-06-03
+
+### Added
+- **Button Loaders:** New `glassy_button_loader_tag` helper for premium inline loading states.
+- **Glassy Toasts:** New `glassy_toast_tag` helper for background process notifications.
+- **Staggered Animations:** Automatic entrance delays for skeleton layouts (`staggered: true`).
+- **New JS Methods:** Added `showToast()`, `hideToast()`, and `toggleButton()` to the API.
+- **UI/UX Polish:** Enhanced blur transitions and smoother entrance keyframes for all components.
+
+## [1.1.0] - 2026-06-03
+
+### Added
+- **Skeleton Layouts:** Professional presets for `feed`, `profile`, and `grid` patterns.
+- **UX Polish:** Added `delay` and `min_duration` to prevent loading flickers.
+- **Accessibility:** Native ARIA roles, `aria-busy`, and `aria-live` support.
+- **Interactive Mode:** New `initInteractive()` JS method for mouse-reactive 3D tilt effects.
+- **Direct Progress Control:** New `updateProgress()` JS method for manual progress bar updates.
+- **Responsive Scaling:** Automatic scaling for tablets and mobile devices.
+- **Production Ready:** Stabilized API and comprehensive documentation.
+
+## [0.5.0] - 2026-06-03
+
+### Added
+- **Massive Animation Library:** Added 110+ premium loading animations across 5 categories.
+- **Premium Theme Library:** Added 20+ designer themes (`apple`, `gold`, `ocean`, etc.).
+- **Tailwind CSS Integration:** Full compatibility with Tailwind classes.

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 shiboshreeroy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,174 @@
+# 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:
+
+```ruby
+gem 'glassy_loader'
+```
+
+And then execute:
+
+```bash
+$ bundle install
+```
+
+### Include Assets
+
+In your `application.css`:
+```css
+/*= require glassy_loader/main */
+```
+
+In your `application.js`:
+```javascript
+//= require glassy_loader/loader
+```
+
+---
+
+## ⚙️ Global Configuration
+
+Set your project-wide defaults in `config/initializers/glassy_loader.rb`:
+
+```ruby
+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.
+
+```erb
+<%= 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.
+
+```erb
+<!-- 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.
+
+```erb
+<!-- 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 %>
+```
+```javascript
+// Toggle loading state
+GlassyLoader.toggleButton('pay-btn', true);
+```
+
+#### Glassy Loading Toast
+For non-intrusive background tasks (syncing, uploading).
+```erb
+<%= glassy_toast_tag "Uploading 4 files...", id: "upload-toast", theme: :apple %>
+```
+```javascript
+// Show with auto-hide duration (in seconds)
+GlassyLoader.showToast('upload-toast', { duration: 5 });
+```
+
+---
+
+---
+
+## 🕹 JavaScript API
+
+Control your loaders programmatically for advanced workflows.
+
+### Visibility & States
+```javascript
+// 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
+```javascript
+// 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](https://opensource.org/licenses/MIT).
+
+For bug reports or feature requests, please visit the [GitHub Repository](https://github.com/shiboshreeroy/glassy_loader).

data/Rakefile

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task default: :spec

data/app/assets/javascripts/glassy_loader/loader.js

@@ -0,0 +1,224 @@
+window.GlassyLoader = {
+  _timers: {},
+  _startTimes: {},
+
+  // Overlay Loader
+  show: function(id = 'glassy-loader', options = {}) {
+    const el = document.getElementById(id);
+    if (!el) return;
+
+    const delay = parseFloat(options.delay || el.getAttribute('data-delay') || 0);
+    const minDuration = parseFloat(options.minDuration || el.getAttribute('data-min-duration') || 0);
+
+    // Prevent flicker: Wait 'delay' before showing
+    this._timers[id + '_delay'] = setTimeout(() => {
+      el.classList.remove('glassy-loader--success', 'glassy-loader--error');
+      el.style.display = 'flex';
+      el.setAttribute('aria-busy', 'true');
+      
+      requestAnimationFrame(() => {
+        el.style.opacity = '1';
+      });
+
+      this._startTimes[id] = Date.now();
+
+      // Handle auto-hide duration
+      const duration = options.duration || el.getAttribute('data-duration');
+      if (duration) {
+        this._timers[id + '_duration'] = setTimeout(() => {
+          this.hide(id);
+        }, parseFloat(duration) * 1000);
+      }
+    }, delay * 1000);
+  },
+
+  hide: function(id = 'glassy-loader') {
+    const el = document.getElementById(id);
+    if (!el) return;
+
+    // Clear pending show delay
+    clearTimeout(this._timers[id + '_delay']);
+
+    const startTime = this._startTimes[id];
+    const minDuration = parseFloat(el.getAttribute('data-min-duration') || 0) * 1000;
+    const elapsed = startTime ? Date.now() - startTime : 0;
+    const remaining = Math.max(0, minDuration - elapsed);
+
+    // Ensure it stays visible for at least minDuration
+    setTimeout(() => {
+      el.style.opacity = '0';
+      el.setAttribute('aria-busy', 'false');
+      setTimeout(() => {
+        el.style.display = 'none';
+        el.classList.remove('glassy-loader--success', 'glassy-loader--error');
+      }, 300);
+    }, remaining);
+  },
+
+  success: function(id = 'glassy-loader', message = null) {
+    const el = document.getElementById(id);
+    if (el) {
+      el.classList.remove('glassy-loader--error');
+      el.classList.add('glassy-loader--success');
+      if (message) {
+        const msgEl = el.querySelector('.glassy-loader__message');
+        if (msgEl) msgEl.textContent = message;
+      }
+      setTimeout(() => this.hide(id), 2000);
+    }
+  },
+
+  error: function(id = 'glassy-loader', message = null) {
+    const el = document.getElementById(id);
+    if (el) {
+      el.classList.remove('glassy-loader--success');
+      el.classList.add('glassy-loader--error');
+      if (message) {
+        const msgEl = el.querySelector('.glassy-loader__message');
+        if (msgEl) msgEl.textContent = message;
+      }
+      setTimeout(() => this.hide(id), 3000);
+    }
+  },
+
+  // YouTube-style Progress Bar
+  _progressInterval: null,
+  
+  startProgress: function(id = 'glassy-progress-bar') {
+    const container = document.getElementById(id);
+    if (!container) return;
+    
+    const bar = container.querySelector('.glassy-progress-bar');
+    if (!bar) return;
+
+    container.style.display = 'block';
+    container.setAttribute('aria-busy', 'true');
+    bar.style.width = '0%';
+    bar.style.opacity = '1';
+
+    let width = 0;
+    if (this._progressInterval) clearInterval(this._progressInterval);
+
+    this._progressInterval = setInterval(() => {
+      if (width >= 90) {
+        clearInterval(this._progressInterval);
+      } else {
+        width += Math.random() * 5;
+        bar.style.width = width + '%';
+      }
+    }, 200);
+  },
+
+  updateProgress: function(id = 'glassy-progress-bar', percentage) {
+    const container = document.getElementById(id);
+    if (!container) return;
+    const bar = container.querySelector('.glassy-progress-bar');
+    if (!bar) return;
+
+    clearInterval(this._progressInterval);
+    container.style.display = 'block';
+    bar.style.width = percentage + '%';
+    if (percentage >= 100) setTimeout(() => this.stopProgress(id), 200);
+  },
+
+  // Toast Control
+  showToast: function(id = 'glassy-toast', options = {}) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.style.display = 'flex';
+    requestAnimationFrame(() => {
+      el.classList.add('show');
+    });
+    
+    if (options.duration) {
+      setTimeout(() => this.hideToast(id), options.duration * 1000);
+    }
+  },
+
+  hideToast: function(id = 'glassy-toast') {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.classList.remove('show');
+    setTimeout(() => {
+      el.style.display = 'none';
+    }, 400);
+  },
+
+  // Button Control
+  toggleButton: function(id, isLoading = true) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    const spinner = el.querySelector('.glassy-loader');
+    
+    if (isLoading) {
+      el.classList.add('loading');
+      el.disabled = true;
+      if (spinner) this.show(spinner.id);
+    } else {
+      el.classList.remove('loading');
+      el.disabled = false;
+      if (spinner) this.hide(spinner.id);
+    }
+  },
+
+  // Interactive Effects
+  initInteractive: function(id = 'glassy-loader') {
+    const el = document.getElementById(id);
+    if (!el) return;
+
+    el.addEventListener('mousemove', (e) => {
+      const { left, top, width, height } = el.getBoundingClientRect();
+      const x = (e.clientX - left) / width - 0.5;
+      const y = (e.clientY - top) / height - 0.5;
+      
+      const spinner = el.querySelector('.glassy-loader__spinner-container');
+      if (spinner) {
+        spinner.style.transform = `rotateY(${x * 20}deg) rotateX(${y * -20}deg)`;
+      }
+    });
+
+    el.addEventListener('mouseleave', () => {
+      const spinner = el.querySelector('.glassy-loader__spinner-container');
+      if (spinner) spinner.style.transform = 'rotateY(0) rotateX(0)';
+    });
+  },
+
+  stopProgress: function(id = 'glassy-progress-bar') {
+    const container = document.getElementById(id);
+    if (!container) return;
+
+    const bar = container.querySelector('.glassy-progress-bar');
+    if (!bar) return;
+
+    clearInterval(this._progressInterval);
+    bar.style.width = '100%';
+    
+    setTimeout(() => {
+      bar.style.opacity = '0';
+      container.setAttribute('aria-busy', 'false');
+      setTimeout(() => {
+        container.style.display = 'none';
+        bar.style.width = '0%';
+      }, 400);
+    }, 300);
+  }
+};
+
+// Turbo integration
+document.addEventListener("turbo:before-visit", function() {
+  if (document.getElementById('glassy-loader-auto')) {
+    GlassyLoader.show('glassy-loader-auto');
+  }
+  if (document.getElementById('glassy-progress-bar-auto')) {
+    GlassyLoader.startProgress('glassy-progress-bar-auto');
+  }
+});
+
+document.addEventListener("turbo:load", function() {
+  if (document.getElementById('glassy-loader-auto')) {
+    GlassyLoader.hide('glassy-loader-auto');
+  }
+  if (document.getElementById('glassy-progress-bar-auto')) {
+    GlassyLoader.stopProgress('glassy-progress-bar-auto');
+  }
+});