glassy_loader 1.2.0

data/app/assets/stylesheets/glassy_loader/main.css

@@ -0,0 +1,360 @@
+@import "./library/themes";
+@import "./library/animations";
+
+:root {
+  /* Default Next.js Style */
+  --glassy-loader-bg: rgba(255, 255, 255, 0.1);
+  --glassy-loader-blur: 10px;
+  --glassy-loader-border: rgba(255, 255, 255, 0.2);
+  --glassy-loader-spinner-color: #000000;
+  --glassy-loader-text-color: #171717;
+  --glassy-progress-color: #000000;
+  --glassy-skeleton-bg: rgba(0, 0, 0, 0.05);
+  --glassy-success-color: #22c55e;
+  --glassy-error-color: #ef4444;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --glassy-loader-bg: rgba(0, 0, 0, 0.3);
+    --glassy-loader-spinner-color: #ffffff;
+    --glassy-loader-text-color: #ededed;
+    --glassy-progress-color: #ffffff;
+    --glassy-skeleton-bg: rgba(255, 255, 255, 0.05);
+  }
+}
+
+/* Theme: Apple (Minimal Blur) */
+.glassy-theme-apple {
+  --glassy-loader-bg: rgba(255, 255, 255, 0.4);
+  --glassy-loader-blur: 20px;
+  --glassy-loader-spinner-color: #86868b;
+}
+
+/* Theme: Cyberpunk (Neon) */
+.glassy-theme-cyberpunk {
+  --glassy-loader-bg: rgba(13, 2, 33, 0.7);
+  --glassy-loader-blur: 5px;
+  --glassy-loader-spinner-color: #00ff00;
+  --glassy-loader-border: #00ff00;
+  --glassy-loader-text-color: #00ff00;
+  --glassy-progress-color: #00ff00;
+}
+
+/* Liquid Progress Bar (Premium) */
+.glassy-progress--liquid .glassy-progress-bar {
+  position: relative;
+  overflow: hidden;
+}
+
+.glassy-progress--liquid .glassy-progress-bar::after {
+  content: "";
+  position: absolute;
+  top: -50%; left: -50%; width: 200%; height: 200%;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 40%;
+  animation: glassy-liquid 2s linear infinite;
+}
+
+@keyframes glassy-liquid {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Base Classes */
+.glassy-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  background: var(--glassy-loader-bg);
+  backdrop-filter: blur(var(--glassy-loader-blur));
+  -webkit-backdrop-filter: blur(var(--glassy-loader-blur));
+  border: 1px solid var(--glassy-loader-border);
+  transition: opacity 0.3s ease;
+  opacity: 0;
+}
+
+.glassy-loader--full-screen {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100vw; height: 100vh;
+}
+
+.glassy-loader--container {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+}
+
+.glassy-loader__spinner-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px; height: 60px;
+}
+
+/* Animations */
+
+/* 1. Spin */
+.glassy-anim-spin .glassy-loader__spinner {
+  width: 50px; height: 50px;
+  border: 3px solid var(--glassy-loader-border);
+  border-top-color: var(--glassy-loader-spinner-color);
+  border-radius: 50%;
+  animation: glassy-spin 1s linear infinite;
+}
+
+/* 2. Pulse */
+.glassy-anim-pulse .glassy-loader__spinner {
+  width: 40px; height: 40px;
+  background: var(--glassy-loader-spinner-color);
+  border-radius: 50%;
+  animation: glassy-pulse 1.2s ease-in-out infinite;
+}
+
+/* 3. Dots */
+.glassy-anim-dots .glassy-loader__spinner {
+  width: 12px; height: 12px;
+  background: var(--glassy-loader-spinner-color);
+  border-radius: 50%;
+  box-shadow: 20px 0 var(--glassy-loader-spinner-color), -20px 0 var(--glassy-loader-spinner-color);
+  animation: glassy-dots 1s infinite alternate;
+}
+
+/* 4. Orbit (Premium) */
+.glassy-anim-orbit .glassy-loader__spinner {
+  width: 50px; height: 50px;
+  position: relative;
+  perspective: 1000px;
+}
+
+.glassy-anim-orbit .glassy-loader__spinner::before,
+.glassy-anim-orbit .glassy-loader__spinner::after {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; width: 100%; height: 100%;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  border-top-color: var(--glassy-loader-spinner-color);
+  animation: glassy-orbit 1.5s linear infinite;
+}
+
+.glassy-anim-orbit .glassy-loader__spinner::after {
+  width: 70%; height: 70%; top: 15%; left: 15%;
+  border-top-color: var(--glassy-loader-spinner-color);
+  animation-duration: 1s;
+  animation-direction: reverse;
+  opacity: 0.6;
+}
+
+@keyframes glassy-orbit {
+  0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
+  100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
+}
+
+@keyframes glassy-spin { to { transform: rotate(360deg); } }
+@keyframes glassy-pulse {
+  0%, 100% { transform: scale(1); opacity: 0.6; }
+  50% { transform: scale(1.5); opacity: 0.2; }
+}
+@keyframes glassy-dots {
+  0% { transform: scale(1); opacity: 1; }
+  100% { transform: scale(0.5); opacity: 0.3; }
+}
+
+/* State Icons (Success/Error) */
+.glassy-loader__state-icon {
+  position: absolute;
+  width: 30px; height: 30px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.glassy-loader--success .glassy-loader__spinner { display: none; }
+.glassy-loader--success .glassy-loader__state-icon { display: flex; }
+.glassy-loader--success .glassy-loader__state-icon::before {
+  content: "✓";
+  font-size: 30px;
+  color: var(--glassy-success-color);
+  font-weight: bold;
+  animation: glassy-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.glassy-loader--error .glassy-loader__spinner { display: none; }
+.glassy-loader--error .glassy-loader__state-icon { display: flex; }
+.glassy-loader--error .glassy-loader__state-icon::before {
+  content: "✕";
+  font-size: 30px;
+  color: var(--glassy-error-color);
+  font-weight: bold;
+  animation: glassy-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes glassy-pop {
+  0% { transform: scale(0); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+/* Progress Bar & Skeletons */
+.glassy-progress-bar-container {
+  position: fixed;
+  top: 0; left: 0; width: 100%; height: 3px;
+  z-index: 10000; display: none;
+}
+
+.glassy-progress-bar {
+  height: 100%; width: 0%;
+  background: var(--glassy-progress-color);
+  box-shadow: 0 0 8px var(--glassy-progress-glow, transparent);
+  transition: width 0.4s ease;
+}
+
+.glassy-skeleton {
+  background: var(--glassy-skeleton-bg);
+  position: relative; overflow: hidden;
+}
+
+.glassy-skeleton::after {
+  content: ""; position: absolute; top: 0; left: -150%; width: 150%; height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  animation: glassy-shimmer 2s infinite;
+}
+
+@keyframes glassy-shimmer {
+  100% { left: 150%; }
+}
+
+/* Skeleton Layouts */
+.glassy-skeleton-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.glassy-skeleton-row {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.glassy-skeleton-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+}
+
+.glassy-skeleton-profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+}
+
+.glassy-skeleton-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 15px;
+}
+
+.glassy-card {
+  background: var(--glassy-loader-bg);
+  backdrop-filter: blur(var(--glassy-loader-blur));
+  border: 1px solid var(--glassy-loader-border);
+  border-radius: 12px; padding: 1.5rem;
+}
+
+/* Button Loader */
+.glassy-button-loader {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 1px solid var(--glassy-loader-border);
+  background: var(--glassy-loader-bg);
+  backdrop-filter: blur(8px);
+  padding: 0.5rem 1.5rem;
+  border-radius: 8px;
+  color: var(--glassy-loader-text-color);
+  font-weight: 600;
+}
+
+.glassy-button-text {
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.glassy-button-spinner-container {
+  position: absolute;
+  top: 0; left: 0; width: 100%; height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s;
+}
+
+.glassy-button-loader.loading .glassy-button-text {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.glassy-button-loader.loading .glassy-button-spinner-container {
+  opacity: 1;
+}
+
+/* Toast Loader */
+.glassy-toast {
+  position: fixed;
+  bottom: 2rem; right: 2rem;
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  border-radius: 12px;
+  border: 1px solid var(--glassy-loader-border);
+  background: var(--glassy-loader-bg);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  transform: translateY(100px);
+  opacity: 0;
+  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
+}
+
+.glassy-toast.show {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.glassy-toast__loader {
+  width: 30px; height: 30px;
+  position: relative;
+}
+
+.glassy-toast__message {
+  font-size: 0.875rem;
+  color: var(--glassy-loader-text-color);
+}
+
+/* Responsive Scaling */
+@media (max-width: 768px) {
+  .glassy-loader {
+    transform: scale(0.9);
+  }
+}
+
+@media (max-width: 480px) {
+  .glassy-loader {
+    transform: scale(0.8);
+  }
+}

data/app/helpers/glassy_loader_helper.rb

@@ -0,0 +1,134 @@
+# frozen_string_literal: true
+
+module GlassyLoaderHelper
+  def glassy_loader_tag(message: nil, full_screen: true, id: "glassy-loader", theme: nil, animation: nil, duration: nil, container: false, size: nil, class_name: nil, spinner_class: nil, delay: nil, min_duration: nil)
+    theme ||= GlassyLoader.configuration.theme
+    animation ||= GlassyLoader.configuration.animation
+    duration ||= GlassyLoader.configuration.duration
+
+    classes = [
+      "glassy-loader",
+      "glassy-theme-#{theme}",
+      "glassy-anim-#{animation}",
+      ("glassy-loader--full-screen" if full_screen && !container),
+      ("glassy-loader--container" if container),
+      class_name
+    ].compact.join(" ")
+
+    style = ["display: none;"]
+    style << "font-size: #{size};" if size
+
+    data_attributes = {
+      duration: duration,
+      delay: delay,
+      min_duration: min_duration
+    }.compact
+
+    content_tag :div, id: id, class: classes, style: style.join(" "), data: data_attributes, role: "status", aria: { live: "polite", busy: "false" } do
+      safe_join([
+        content_tag(:div, nil, class: "glassy-loader__spinner-container") do
+          case animation.to_s
+          when "folding-cube"
+            content_tag(:div, nil, class: "glassy-loader__folding-cube") do
+              4.times.map { |i| content_tag(:div, nil, class: "glassy-loader__cube-face face-#{i+1}") }.join.html_safe
+            end
+          when "infinity"
+            content_tag(:svg, class: "glassy-loader__infinity", viewBox: "0 0 256 128") do
+              content_tag(:path, nil, class: "glassy-loader__infinity-path", d: "M128 64C128 64 153.962 32 192 32C230.038 32 256 64 256 64C256 64 230.038 96 192 96C153.962 96 128 64 128 64C128 64 102.038 32 64 32C25.9619 32 0 64 0 64C0 64 25.9619 96 64 96C102.038 96 128 64 128 64Z")
+            end
+          else
+            safe_join([
+              content_tag(:div, nil, class: ["glassy-loader__spinner", spinner_class].compact.join(" ")),
+              content_tag(:div, nil, class: "glassy-loader__state-icon")
+            ])
+          end
+        end,
+        (content_tag(:div, message, class: "glassy-loader__message") if message)
+      ].compact)
+    end
+  end
+
+  def glassy_skeleton_layout(type: :feed, items: 3, theme: nil, staggered: true)
+    theme ||= GlassyLoader.configuration.theme
+    content_tag :div, class: "glassy-skeleton-layout glassy-skeleton-#{type} glassy-theme-#{theme}" do
+      items.times.map do |i|
+        delay = staggered ? "#{i * 0.1}s" : "0s"
+        case type
+        when :feed
+          content_tag :div, class: "glassy-skeleton-row", style: "animation-delay: #{delay}" do
+            safe_join([
+              glassy_skeleton_tag(width: "50px", height: "50px", border_radius: "50%"),
+              content_tag(:div, class: "glassy-skeleton-stack") do
+                safe_join([
+                  glassy_skeleton_tag(width: "70%", height: "15px"),
+                  glassy_skeleton_tag(width: "40%", height: "10px")
+                ])
+              end
+            ])
+          end
+        when :profile
+          content_tag :div, class: "glassy-skeleton-profile", style: "animation-delay: #{delay}" do
+            safe_join([
+              glassy_skeleton_tag(width: "100px", height: "100px", border_radius: "50%"),
+              glassy_skeleton_tag(width: "200px", height: "30px"),
+              glassy_skeleton_tag(width: "150px", height: "15px")
+            ])
+          end
+        when :grid
+          glassy_skeleton_tag(width: "100%", height: "150px", class_name: "glassy-skeleton-item", theme: theme)
+        end
+      end.join.html_safe
+    end
+  end
+
+  def glassy_button_loader_tag(text, id: nil, class_name: nil, theme: nil, animation: :spin-1)
+    theme ||= GlassyLoader.configuration.theme
+    content_tag :button, id: id, class: ["glassy-button-loader", "glassy-theme-#{theme}", class_name].compact.join(" ") do
+      safe_join([
+        content_tag(:span, text, class: "glassy-button-text"),
+        content_tag(:div, nil, class: "glassy-button-spinner-container") do
+          glassy_loader_tag(id: "#{id}-spinner", animation: animation, full_screen: false, container: true, theme: theme)
+        end
+      ])
+    end
+  end
+
+  def glassy_toast_tag(message, id: "glassy-toast", theme: nil, animation: :dots-1)
+    theme ||= GlassyLoader.configuration.theme
+    content_tag :div, id: id, class: ["glassy-toast", "glassy-theme-#{theme}"].compact.join(" "), style: "display: none;" do
+      safe_join([
+        content_tag(:div, nil, class: "glassy-toast__loader") do
+          glassy_loader_tag(animation: animation, full_screen: false, container: true, theme: theme)
+        end,
+        content_tag(:div, message, class: "glassy-toast__message")
+      ])
+    end
+  end
+
+  def glassy_progress_bar_tag(id: "glassy-progress-bar", theme: nil, liquid: false)
+    theme ||= GlassyLoader.configuration.theme
+    classes = [
+      "glassy-progress-bar-container",
+      "glassy-theme-#{theme}",
+      ("glassy-progress--liquid" if liquid)
+    ].compact.join(" ")
+
+    content_tag :div, id: id, class: classes do
+      content_tag :div, nil, class: "glassy-progress-bar"
+    end
+  end
+
+  def glassy_skeleton_tag(width: "100%", height: "20px", border_radius: "4px", class_name: nil, theme: nil)
+    theme ||= GlassyLoader.configuration.theme
+    content_tag :div, nil, 
+                class: ["glassy-skeleton", "glassy-theme-#{theme}", class_name].compact.join(" "),
+                style: "width: #{width}; height: #{height}; border-radius: #{border_radius};"
+  end
+
+  def glassy_card_tag(id: nil, class_name: nil, theme: nil, &block)
+    theme ||= GlassyLoader.configuration.theme
+    content_tag :div, id: id, class: ["glassy-card", "glassy-theme-#{theme}", class_name].compact.join(" ") do
+      capture(&block) if block_given?
+    end
+  end
+end

data/lib/glassy_loader/configuration.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module GlassyLoader
+  class Configuration
+    attr_accessor :theme, :animation, :duration
+
+    def initialize
+      @theme = :default
+      @animation = :spin
+      @duration = nil
+    end
+  end
+end

data/lib/glassy_loader/engine.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module GlassyLoader
+  class Engine < ::Rails::Engine
+    # No isolate_namespace to allow global helper inclusion
+
+    initializer "glassy_loader.assets" do |app|
+      app.config.assets.precompile += %w[glassy_loader/main.css glassy_loader/loader.js]
+    end
+
+    initializer "glassy_loader.helpers" do
+      ActiveSupport.on_load(:action_view) do
+        require_relative "../../app/helpers/glassy_loader_helper"
+        include GlassyLoaderHelper
+      end
+    end
+  end
+end

data/lib/glassy_loader/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module GlassyLoader
+  VERSION = "1.2.0"
+end

data/lib/glassy_loader.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require "bigdecimal"
+require_relative "glassy_loader/version"
+require_relative "glassy_loader/configuration"
+require_relative "glassy_loader/engine" if defined?(Rails)
+
+module GlassyLoader
+  class Error < StandardError; end
+
+  class << self
+    attr_writer :configuration
+
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+    def configure
+      yield(configuration)
+    end
+  end
+end

data/sig/glassy_loader.rbs

@@ -0,0 +1,4 @@
+module GlassyLoader
+  VERSION: String
+  # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+end

metadata

@@ -0,0 +1,71 @@
+--- !ruby/object:Gem::Specification
+name: glassy_loader
+version: !ruby/object:Gem::Version
+  version: 1.2.0
+platform: ruby
+authors:
+- Shiboshree Roy
+bindir: exe
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.0'
+description: A production-ready gem providing high-quality glassmorphism loading overlays
+  and spinners for Rails applications.
+email:
+- shiboshreeroy169@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/javascripts/glassy_loader/loader.js
+- app/assets/stylesheets/glassy_loader/library/_animations.css
+- app/assets/stylesheets/glassy_loader/library/_themes.css
+- app/assets/stylesheets/glassy_loader/main.css
+- app/helpers/glassy_loader_helper.rb
+- lib/glassy_loader.rb
+- lib/glassy_loader/configuration.rb
+- lib/glassy_loader/engine.rb
+- lib/glassy_loader/version.rb
+- sig/glassy_loader.rbs
+homepage: https://github.com/shiboshreeroy/glassy_loader
+licenses:
+- MIT
+metadata:
+  source_code_uri: https://github.com/shiboshreeroy/glassy_loader
+  changelog_uri: https://github.com/shiboshreeroy/glassy_loader/blob/main/CHANGELOG.md
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.2.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.11
+specification_version: 4
+summary: Premium glassy loading animations for Ruby on Rails.
+test_files: []