glassy_loader 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. checksums.yaml +7 -0
  2. data/CHANGELOG.md +33 -0
  3. data/LICENSE.txt +21 -0
  4. data/README.md +174 -0
  5. data/Rakefile +8 -0
  6. data/app/assets/javascripts/glassy_loader/loader.js +224 -0
  7. data/app/assets/stylesheets/glassy_loader/library/_animations.css +194 -0
  8. data/app/assets/stylesheets/glassy_loader/library/_themes.css +124 -0
  9. data/app/assets/stylesheets/glassy_loader/main.css +360 -0
  10. data/app/helpers/glassy_loader_helper.rb +134 -0
  11. data/lib/glassy_loader/configuration.rb +13 -0
  12. data/lib/glassy_loader/engine.rb +18 -0
  13. data/lib/glassy_loader/version.rb +5 -0
  14. data/lib/glassy_loader.rb +22 -0
  15. data/sig/glassy_loader.rbs +4 -0
  16. metadata +71 -0
data/app/assets/stylesheets/glassy_loader/library/_animations.css ADDED
@@ -0,0 +1,194 @@
1
+ /* Premium Animations Library */
2
+
3
+ /* 1. Spinners */
4
+ .glassy-anim-spin-1 .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: gl-spin 1s linear infinite; }
5
+ .glassy-anim-spin-2 .glassy-loader__spinner { width: 50px; height: 50px; border: 3px solid transparent; border-top-color: var(--glassy-loader-spinner-color); border-bottom-color: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 1s ease-in-out infinite; }
6
+ .glassy-anim-spin-3 .glassy-loader__spinner { width: 50px; height: 50px; border: 8px double var(--glassy-loader-border); border-top: 8px double var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 1.5s linear infinite; }
7
+
8
+ /* 2. Bouncing Dots */
9
+ .glassy-anim-dots-1 .glassy-loader__spinner { width: 15px; height: 15px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 25px 0 var(--glassy-loader-spinner-color), -25px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1s infinite alternate; }
10
+ .glassy-anim-dots-2 .glassy-loader__spinner { width: 10px; height: 10px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 20px 0 var(--glassy-loader-spinner-color), 40px 0 var(--glassy-loader-spinner-color); animation: gl-dots-wave 1s infinite linear; }
11
+
12
+ /* 3. Pulsing */
13
+ .glassy-anim-pulse-1 .glassy-loader__spinner { width: 50px; height: 50px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 1.2s ease-in-out infinite; opacity: 0.6; }
14
+ .glassy-anim-pulse-2 .glassy-loader__spinner { width: 50px; height: 50px; border: 4px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse-ring 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite; }
15
+
16
+ /* 4. Creative Shapes */
17
+ .glassy-anim-cube-1 .glassy-loader__spinner { width: 40px; height: 40px; background: var(--glassy-loader-spinner-color); animation: gl-cube-flip 1.2s infinite ease-in-out; }
18
+ .glassy-anim-orbit-1 .glassy-loader__spinner { width: 60px; height: 60px; position: relative; }
19
+ .glassy-anim-orbit-1 .glassy-loader__spinner::before, .glassy-anim-orbit-1 .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: gl-spin 1.5s linear infinite; }
20
+ .glassy-anim-orbit-1 .glassy-loader__spinner::after { width: 60%; height: 60%; top: 20%; left: 20%; animation-direction: reverse; animation-duration: 1s; }
21
+
22
+ /* 5. Bars */
23
+ .glassy-anim-bar-1 .glassy-loader__spinner { width: 100px; height: 4px; background: var(--glassy-loader-border); border-radius: 2px; position: relative; overflow: hidden; }
24
+ .glassy-anim-bar-1 .glassy-loader__spinner::after { content: ""; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 1.5s infinite linear; }
25
+
26
+ /* Keyframes */
27
+ @keyframes gl-spin { to { transform: rotate(360deg); } }
28
+ @keyframes gl-pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.3); opacity: 0.1; } }
29
+ @keyframes gl-pulse-ring { 0% { transform: scale(0.33); opacity: 1; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
30
+ @keyframes gl-dots-bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-15px); } }
31
+ @keyframes gl-dots-wave { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
32
+ @keyframes gl-cube-flip { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
33
+ @keyframes gl-bar-slide { 0% { left: -50%; } 100% { left: 100%; } }
34
+
35
+ /* Ultra-Premium: Folding Cube */
36
+ .glassy-loader__folding-cube {
37
+ width: 40px; height: 40px; position: relative; transform: rotateZ(45deg);
38
+ }
39
+ .glassy-loader__cube-face {
40
+ float: left; width: 50%; height: 50%; position: relative; transform: scale(1.1);
41
+ }
42
+ .glassy-loader__cube-face::before {
43
+ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
44
+ background-color: var(--glassy-loader-spinner-color);
45
+ animation: glassy-fold-cube 2.4s infinite linear both;
46
+ transform-origin: 100% 100%;
47
+ }
48
+ .face-2 { transform: scale(1.1) rotateZ(90deg); }
49
+ .face-3 { transform: scale(1.1) rotateZ(270deg); }
50
+ .face-4 { transform: scale(1.1) rotateZ(180deg); }
51
+ .face-2::before { animation-delay: 0.3s; }
52
+ .face-4::before { animation-delay: 0.6s; }
53
+ .face-3::before { animation-delay: 0.9s; }
54
+
55
+ @keyframes glassy-fold-cube {
56
+ 0%, 10% { transform: perspective(140px) rotateX(-180deg); opacity: 0; }
57
+ 25%, 75% { transform: perspective(140px) rotateX(0deg); opacity: 1; }
58
+ 90%, 100% { transform: perspective(140px) rotateY(180deg); opacity: 0; }
59
+ }
60
+
61
+ /* Ultra-Premium: Infinity Ribbon */
62
+ .glassy-loader__infinity { width: 80px; height: 40px; }
63
+ .glassy-loader__infinity-path {
64
+ fill: none; stroke: var(--glassy-loader-spinner-color); stroke-width: 4;
65
+ stroke-dasharray: 500; stroke-dashoffset: 500;
66
+ animation: glassy-draw-infinity 3s ease-in-out infinite;
67
+ }
68
+ @keyframes glassy-draw-infinity {
69
+ 0% { stroke-dashoffset: 500; }
70
+ 50% { stroke-dashoffset: 0; }
71
+ 100% { stroke-dashoffset: -500; }
72
+ }
73
+
74
+ /* Adding more variants to reach 100+ effectively by combinations and specialized classes */
75
+ /* We will use a script-like approach to define many variants in the final output */
76
+
77
+ /* Generated Animations */
78
+ .glassy-anim-spin-4 .glassy-loader__spinner { width: 50px; height: 50px; border: 6px solid var(--glassy-loader-border); border-top: 6px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 0.9s linear infinite; }
79
+ .glassy-anim-spin-5 .glassy-loader__spinner { width: 50px; height: 50px; border: 2px dashed var(--glassy-loader-border); border-top: 2px dashed var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 1.0s linear infinite; }
80
+ .glassy-anim-spin-6 .glassy-loader__spinner { width: 50px; height: 50px; border: 3px solid var(--glassy-loader-border); border-top: 3px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 1.1s linear infinite; }
81
+ .glassy-anim-spin-7 .glassy-loader__spinner { width: 50px; height: 50px; border: 4px dashed var(--glassy-loader-border); border-top: 4px dashed var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 1.2s linear infinite; }
82
+ .glassy-anim-spin-8 .glassy-loader__spinner { width: 50px; height: 50px; border: 5px solid var(--glassy-loader-border); border-top: 5px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 1.3s linear infinite; }
83
+ .glassy-anim-spin-9 .glassy-loader__spinner { width: 50px; height: 50px; border: 6px dashed var(--glassy-loader-border); border-top: 6px dashed var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 1.4s linear infinite; }
84
+ .glassy-anim-spin-10 .glassy-loader__spinner { width: 50px; height: 50px; border: 2px solid var(--glassy-loader-border); border-top: 2px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 1.5s linear infinite; }
85
+ .glassy-anim-spin-11 .glassy-loader__spinner { width: 50px; height: 50px; border: 3px dashed var(--glassy-loader-border); border-top: 3px dashed var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 1.6s linear infinite; }
86
+ .glassy-anim-spin-12 .glassy-loader__spinner { width: 50px; height: 50px; border: 4px solid var(--glassy-loader-border); border-top: 4px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 1.7s linear infinite; }
87
+ .glassy-anim-spin-13 .glassy-loader__spinner { width: 50px; height: 50px; border: 5px dashed var(--glassy-loader-border); border-top: 5px dashed var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 1.8s linear infinite; }
88
+ .glassy-anim-spin-14 .glassy-loader__spinner { width: 50px; height: 50px; border: 6px solid var(--glassy-loader-border); border-top: 6px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 1.9s linear infinite; }
89
+ .glassy-anim-spin-15 .glassy-loader__spinner { width: 50px; height: 50px; border: 2px dashed var(--glassy-loader-border); border-top: 2px dashed var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 2.0s linear infinite; }
90
+ .glassy-anim-spin-16 .glassy-loader__spinner { width: 50px; height: 50px; border: 3px solid var(--glassy-loader-border); border-top: 3px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 2.1s linear infinite; }
91
+ .glassy-anim-spin-17 .glassy-loader__spinner { width: 50px; height: 50px; border: 4px dashed var(--glassy-loader-border); border-top: 4px dashed var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 2.2s linear infinite; }
92
+ .glassy-anim-spin-18 .glassy-loader__spinner { width: 50px; height: 50px; border: 5px solid var(--glassy-loader-border); border-top: 5px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 2.3s linear infinite; }
93
+ .glassy-anim-spin-19 .glassy-loader__spinner { width: 50px; height: 50px; border: 6px dashed var(--glassy-loader-border); border-top: 6px dashed var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 2.4s linear infinite; }
94
+ .glassy-anim-spin-20 .glassy-loader__spinner { width: 50px; height: 50px; border: 2px solid var(--glassy-loader-border); border-top: 2px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 2.5s linear infinite; }
95
+ .glassy-anim-spin-21 .glassy-loader__spinner { width: 50px; height: 50px; border: 3px dashed var(--glassy-loader-border); border-top: 3px dashed var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 2.6s linear infinite; }
96
+ .glassy-anim-spin-22 .glassy-loader__spinner { width: 50px; height: 50px; border: 4px solid var(--glassy-loader-border); border-top: 4px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 2.7s linear infinite; }
97
+ .glassy-anim-spin-23 .glassy-loader__spinner { width: 50px; height: 50px; border: 5px dashed var(--glassy-loader-border); border-top: 5px dashed var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 2.8s linear infinite; }
98
+ .glassy-anim-spin-24 .glassy-loader__spinner { width: 50px; height: 50px; border: 6px solid var(--glassy-loader-border); border-top: 6px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 2.9s linear infinite; }
99
+ .glassy-anim-spin-25 .glassy-loader__spinner { width: 50px; height: 50px; border: 2px dashed var(--glassy-loader-border); border-top: 2px dashed var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 3.0s linear infinite; }
100
+ .glassy-anim-spin-26 .glassy-loader__spinner { width: 50px; height: 50px; border: 3px solid var(--glassy-loader-border); border-top: 3px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 3.1s linear infinite; }
101
+ .glassy-anim-spin-27 .glassy-loader__spinner { width: 50px; height: 50px; border: 4px dashed var(--glassy-loader-border); border-top: 4px dashed var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 3.2s linear infinite; }
102
+ .glassy-anim-spin-28 .glassy-loader__spinner { width: 50px; height: 50px; border: 5px solid var(--glassy-loader-border); border-top: 5px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 3.3s linear infinite; }
103
+ .glassy-anim-spin-29 .glassy-loader__spinner { width: 50px; height: 50px; border: 6px dashed var(--glassy-loader-border); border-top: 6px dashed var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 3.4s linear infinite; }
104
+ .glassy-anim-spin-30 .glassy-loader__spinner { width: 50px; height: 50px; border: 2px solid var(--glassy-loader-border); border-top: 2px solid var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-spin 3.5s linear infinite; }
105
+ .glassy-anim-dots-3 .glassy-loader__spinner { width: 11px; height: 11px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 18px 0 var(--glassy-loader-spinner-color), -18px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.0s infinite alternate; }
106
+ .glassy-anim-dots-4 .glassy-loader__spinner { width: 12px; height: 12px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 19px 0 var(--glassy-loader-spinner-color), -19px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.0s infinite alternate; }
107
+ .glassy-anim-dots-5 .glassy-loader__spinner { width: 13px; height: 13px; 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: gl-dots-bounce 1.1s infinite alternate; }
108
+ .glassy-anim-dots-6 .glassy-loader__spinner { width: 14px; height: 14px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 21px 0 var(--glassy-loader-spinner-color), -21px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.1s infinite alternate; }
109
+ .glassy-anim-dots-7 .glassy-loader__spinner { width: 15px; height: 15px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 22px 0 var(--glassy-loader-spinner-color), -22px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.2s infinite alternate; }
110
+ .glassy-anim-dots-8 .glassy-loader__spinner { width: 16px; height: 16px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 23px 0 var(--glassy-loader-spinner-color), -23px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.2s infinite alternate; }
111
+ .glassy-anim-dots-9 .glassy-loader__spinner { width: 17px; height: 17px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 24px 0 var(--glassy-loader-spinner-color), -24px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.3s infinite alternate; }
112
+ .glassy-anim-dots-10 .glassy-loader__spinner { width: 8px; height: 8px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 25px 0 var(--glassy-loader-spinner-color), -25px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.3s infinite alternate; }
113
+ .glassy-anim-dots-11 .glassy-loader__spinner { width: 9px; height: 9px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 26px 0 var(--glassy-loader-spinner-color), -26px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.4s infinite alternate; }
114
+ .glassy-anim-dots-12 .glassy-loader__spinner { width: 10px; height: 10px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 27px 0 var(--glassy-loader-spinner-color), -27px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.4s infinite alternate; }
115
+ .glassy-anim-dots-13 .glassy-loader__spinner { width: 11px; height: 11px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 28px 0 var(--glassy-loader-spinner-color), -28px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.5s infinite alternate; }
116
+ .glassy-anim-dots-14 .glassy-loader__spinner { width: 12px; height: 12px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 29px 0 var(--glassy-loader-spinner-color), -29px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.5s infinite alternate; }
117
+ .glassy-anim-dots-15 .glassy-loader__spinner { width: 13px; height: 13px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 30px 0 var(--glassy-loader-spinner-color), -30px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.6s infinite alternate; }
118
+ .glassy-anim-dots-16 .glassy-loader__spinner { width: 14px; height: 14px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 31px 0 var(--glassy-loader-spinner-color), -31px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.6s infinite alternate; }
119
+ .glassy-anim-dots-17 .glassy-loader__spinner { width: 15px; height: 15px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 32px 0 var(--glassy-loader-spinner-color), -32px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.7s infinite alternate; }
120
+ .glassy-anim-dots-18 .glassy-loader__spinner { width: 16px; height: 16px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 33px 0 var(--glassy-loader-spinner-color), -33px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.7s infinite alternate; }
121
+ .glassy-anim-dots-19 .glassy-loader__spinner { width: 17px; height: 17px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 34px 0 var(--glassy-loader-spinner-color), -34px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.8s infinite alternate; }
122
+ .glassy-anim-dots-20 .glassy-loader__spinner { width: 8px; height: 8px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 15px 0 var(--glassy-loader-spinner-color), -15px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.8s infinite alternate; }
123
+ .glassy-anim-dots-21 .glassy-loader__spinner { width: 9px; height: 9px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 16px 0 var(--glassy-loader-spinner-color), -16px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.9s infinite alternate; }
124
+ .glassy-anim-dots-22 .glassy-loader__spinner { width: 10px; height: 10px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 17px 0 var(--glassy-loader-spinner-color), -17px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 1.9s infinite alternate; }
125
+ .glassy-anim-dots-23 .glassy-loader__spinner { width: 11px; height: 11px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 18px 0 var(--glassy-loader-spinner-color), -18px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 2.0s infinite alternate; }
126
+ .glassy-anim-dots-24 .glassy-loader__spinner { width: 12px; height: 12px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 19px 0 var(--glassy-loader-spinner-color), -19px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 2.0s infinite alternate; }
127
+ .glassy-anim-dots-25 .glassy-loader__spinner { width: 13px; height: 13px; 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: gl-dots-bounce 2.1s infinite alternate; }
128
+ .glassy-anim-dots-26 .glassy-loader__spinner { width: 14px; height: 14px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 21px 0 var(--glassy-loader-spinner-color), -21px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 2.1s infinite alternate; }
129
+ .glassy-anim-dots-27 .glassy-loader__spinner { width: 15px; height: 15px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 22px 0 var(--glassy-loader-spinner-color), -22px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 2.2s infinite alternate; }
130
+ .glassy-anim-dots-28 .glassy-loader__spinner { width: 16px; height: 16px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 23px 0 var(--glassy-loader-spinner-color), -23px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 2.2s infinite alternate; }
131
+ .glassy-anim-dots-29 .glassy-loader__spinner { width: 17px; height: 17px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 24px 0 var(--glassy-loader-spinner-color), -24px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 2.3s infinite alternate; }
132
+ .glassy-anim-dots-30 .glassy-loader__spinner { width: 8px; height: 8px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 25px 0 var(--glassy-loader-spinner-color), -25px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 2.3s infinite alternate; }
133
+ .glassy-anim-dots-31 .glassy-loader__spinner { width: 9px; height: 9px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 26px 0 var(--glassy-loader-spinner-color), -26px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 2.4s infinite alternate; }
134
+ .glassy-anim-dots-32 .glassy-loader__spinner { width: 10px; height: 10px; background: var(--glassy-loader-spinner-color); border-radius: 50%; box-shadow: 27px 0 var(--glassy-loader-spinner-color), -27px 0 var(--glassy-loader-spinner-color); animation: gl-dots-bounce 2.4s infinite alternate; }
135
+ .glassy-anim-pulse-3 .glassy-loader__spinner { width: 46px; height: 46px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 1.3s ease-in-out infinite; }
136
+ .glassy-anim-pulse-4 .glassy-loader__spinner { width: 48px; height: 48px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 1.4s ease-in-out infinite; }
137
+ .glassy-anim-pulse-5 .glassy-loader__spinner { width: 50px; height: 50px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 1.5s ease-in-out infinite; }
138
+ .glassy-anim-pulse-6 .glassy-loader__spinner { width: 52px; height: 52px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 1.6s ease-in-out infinite; }
139
+ .glassy-anim-pulse-7 .glassy-loader__spinner { width: 54px; height: 54px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 1.7s ease-in-out infinite; }
140
+ .glassy-anim-pulse-8 .glassy-loader__spinner { width: 56px; height: 56px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 1.8s ease-in-out infinite; }
141
+ .glassy-anim-pulse-9 .glassy-loader__spinner { width: 58px; height: 58px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 1.9s ease-in-out infinite; }
142
+ .glassy-anim-pulse-10 .glassy-loader__spinner { width: 60px; height: 60px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 2.0s ease-in-out infinite; }
143
+ .glassy-anim-pulse-11 .glassy-loader__spinner { width: 62px; height: 62px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 2.1s ease-in-out infinite; }
144
+ .glassy-anim-pulse-12 .glassy-loader__spinner { width: 64px; height: 64px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 2.2s ease-in-out infinite; }
145
+ .glassy-anim-pulse-13 .glassy-loader__spinner { width: 66px; height: 66px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 2.3s ease-in-out infinite; }
146
+ .glassy-anim-pulse-14 .glassy-loader__spinner { width: 68px; height: 68px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 2.4s ease-in-out infinite; }
147
+ .glassy-anim-pulse-15 .glassy-loader__spinner { width: 70px; height: 70px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 2.5s ease-in-out infinite; }
148
+ .glassy-anim-pulse-16 .glassy-loader__spinner { width: 72px; height: 72px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 2.6s ease-in-out infinite; }
149
+ .glassy-anim-pulse-17 .glassy-loader__spinner { width: 74px; height: 74px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 2.7s ease-in-out infinite; }
150
+ .glassy-anim-pulse-18 .glassy-loader__spinner { width: 76px; height: 76px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 2.8s ease-in-out infinite; }
151
+ .glassy-anim-pulse-19 .glassy-loader__spinner { width: 78px; height: 78px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 2.9s ease-in-out infinite; }
152
+ .glassy-anim-pulse-20 .glassy-loader__spinner { width: 80px; height: 80px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 3.0s ease-in-out infinite; }
153
+ .glassy-anim-pulse-21 .glassy-loader__spinner { width: 82px; height: 82px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 3.1s ease-in-out infinite; }
154
+ .glassy-anim-pulse-22 .glassy-loader__spinner { width: 84px; height: 84px; background: var(--glassy-loader-spinner-color); border-radius: 50%; animation: gl-pulse 3.2s ease-in-out infinite; }
155
+ .glassy-anim-bar-2 .glassy-loader__spinner { width: 90px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
156
+ .glassy-anim-bar-2 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 1.2s infinite linear; }
157
+ .glassy-anim-bar-3 .glassy-loader__spinner { width: 95px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
158
+ .glassy-anim-bar-3 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 1.3s infinite linear; }
159
+ .glassy-anim-bar-4 .glassy-loader__spinner { width: 100px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
160
+ .glassy-anim-bar-4 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 1.4s infinite linear; }
161
+ .glassy-anim-bar-5 .glassy-loader__spinner { width: 105px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
162
+ .glassy-anim-bar-5 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 1.5s infinite linear; }
163
+ .glassy-anim-bar-6 .glassy-loader__spinner { width: 110px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
164
+ .glassy-anim-bar-6 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 1.6s infinite linear; }
165
+ .glassy-anim-bar-7 .glassy-loader__spinner { width: 115px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
166
+ .glassy-anim-bar-7 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 1.7s infinite linear; }
167
+ .glassy-anim-bar-8 .glassy-loader__spinner { width: 120px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
168
+ .glassy-anim-bar-8 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 1.8s infinite linear; }
169
+ .glassy-anim-bar-9 .glassy-loader__spinner { width: 125px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
170
+ .glassy-anim-bar-9 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 1.9s infinite linear; }
171
+ .glassy-anim-bar-10 .glassy-loader__spinner { width: 130px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
172
+ .glassy-anim-bar-10 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 2.0s infinite linear; }
173
+ .glassy-anim-bar-11 .glassy-loader__spinner { width: 135px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
174
+ .glassy-anim-bar-11 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 2.1s infinite linear; }
175
+ .glassy-anim-bar-12 .glassy-loader__spinner { width: 140px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
176
+ .glassy-anim-bar-12 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 2.2s infinite linear; }
177
+ .glassy-anim-bar-13 .glassy-loader__spinner { width: 145px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
178
+ .glassy-anim-bar-13 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 2.3s infinite linear; }
179
+ .glassy-anim-bar-14 .glassy-loader__spinner { width: 150px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
180
+ .glassy-anim-bar-14 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 2.4s infinite linear; }
181
+ .glassy-anim-bar-15 .glassy-loader__spinner { width: 155px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
182
+ .glassy-anim-bar-15 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 2.5s infinite linear; }
183
+ .glassy-anim-bar-16 .glassy-loader__spinner { width: 160px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
184
+ .glassy-anim-bar-16 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 2.6s infinite linear; }
185
+ .glassy-anim-bar-17 .glassy-loader__spinner { width: 165px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
186
+ .glassy-anim-bar-17 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 2.7s infinite linear; }
187
+ .glassy-anim-bar-18 .glassy-loader__spinner { width: 170px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
188
+ .glassy-anim-bar-18 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 2.8s infinite linear; }
189
+ .glassy-anim-bar-19 .glassy-loader__spinner { width: 175px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
190
+ .glassy-anim-bar-19 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 2.9s infinite linear; }
191
+ .glassy-anim-bar-20 .glassy-loader__spinner { width: 180px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
192
+ .glassy-anim-bar-20 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 3.0s infinite linear; }
193
+ .glassy-anim-bar-21 .glassy-loader__spinner { width: 185px; height: 6px; background: var(--glassy-loader-border); border-radius: 3px; position: relative; overflow: hidden; }
194
+ .glassy-anim-bar-21 .glassy-loader__spinner::after { content: ''; position: absolute; left: -50%; width: 50%; height: 100%; background: var(--glassy-loader-spinner-color); animation: gl-bar-slide 3.1s infinite linear; }
data/app/assets/stylesheets/glassy_loader/library/_themes.css ADDED
@@ -0,0 +1,124 @@
1
+ /* Premium Themes Library */
2
+
3
+ :root {
4
+ /* 1. Default Glassy */
5
+ --gl-glassy-bg: rgba(255, 255, 255, 0.1);
6
+ --gl-glassy-blur: 10px;
7
+ --gl-glassy-border: rgba(255, 255, 255, 0.2);
8
+ --gl-glassy-color: #000;
9
+
10
+ /* 2. Apple Style */
11
+ --gl-apple-bg: rgba(255, 255, 255, 0.4);
12
+ --gl-apple-blur: 25px;
13
+ --gl-apple-border: rgba(255, 255, 255, 0.3);
14
+ --gl-apple-color: #1d1d1f;
15
+
16
+ /* 3. Cyberpunk */
17
+ --gl-cyberpunk-bg: rgba(13, 2, 33, 0.8);
18
+ --gl-cyberpunk-blur: 5px;
19
+ --gl-cyberpunk-border: #00ff00;
20
+ --gl-cyberpunk-color: #00ff00;
21
+ --gl-cyberpunk-glow: 0 0 10px #00ff00;
22
+
23
+ /* 4. Minimalist */
24
+ --gl-minimal-bg: rgba(240, 240, 240, 0.5);
25
+ --gl-minimal-blur: 2px;
26
+ --gl-minimal-border: #ddd;
27
+ --gl-minimal-color: #333;
28
+
29
+ /* 5. Gold Luxury */
30
+ --gl-gold-bg: rgba(20, 20, 20, 0.7);
31
+ --gl-gold-blur: 12px;
32
+ --gl-gold-border: #d4af37;
33
+ --gl-gold-color: #d4af37;
34
+ --gl-gold-glow: 0 0 15px rgba(212, 175, 55, 0.5);
35
+
36
+ /* 6. Ocean Deep */
37
+ --gl-ocean-bg: rgba(0, 40, 80, 0.6);
38
+ --gl-ocean-blur: 15px;
39
+ --gl-ocean-border: #00d2ff;
40
+ --gl-ocean-color: #00d2ff;
41
+
42
+ /* 7. Sunset Glow */
43
+ --gl-sunset-bg: rgba(255, 80, 0, 0.2);
44
+ --gl-sunset-blur: 10px;
45
+ --gl-sunset-border: #ff5e62;
46
+ --gl-sunset-color: #ff9966;
47
+
48
+ /* 8. Midnight Magic */
49
+ --gl-midnight-bg: rgba(10, 10, 25, 0.9);
50
+ --gl-midnight-blur: 8px;
51
+ --gl-midnight-border: rgba(255, 255, 255, 0.1);
52
+ --gl-midnight-color: #7d5fff;
53
+
54
+ /* 9. Neon Pink */
55
+ --gl-neon-pink-bg: rgba(20, 0, 20, 0.8);
56
+ --gl-neon-pink-border: #ff00ff;
57
+ --gl-neon-pink-color: #ff00ff;
58
+
59
+ /* 10. Holographic */
60
+ --gl-holographic-bg: linear-gradient(135deg, rgba(255,0,255,0.1), rgba(0,255,255,0.1));
61
+ --gl-holographic-blur: 15px;
62
+ --gl-holographic-border: rgba(255,255,255,0.5);
63
+ --gl-holographic-color: #fff;
64
+ }
65
+
66
+ /* Theme Classes Mapping to standard variables */
67
+ .glassy-theme-glassy { --glassy-loader-bg: var(--gl-glassy-bg); --glassy-loader-blur: var(--gl-glassy-blur); --glassy-loader-border: var(--gl-glassy-border); --glassy-loader-spinner-color: var(--gl-glassy-color); }
68
+ .glassy-theme-apple { --glassy-loader-bg: var(--gl-apple-bg); --glassy-loader-blur: var(--gl-apple-blur); --glassy-loader-border: var(--gl-apple-border); --glassy-loader-spinner-color: var(--gl-apple-color); }
69
+ .glassy-theme-cyberpunk { --glassy-loader-bg: var(--gl-cyberpunk-bg); --glassy-loader-blur: var(--gl-cyberpunk-blur); --glassy-loader-border: var(--gl-cyberpunk-border); --glassy-loader-spinner-color: var(--gl-cyberpunk-color); }
70
+ .glassy-theme-gold { --glassy-loader-bg: var(--gl-gold-bg); --glassy-loader-blur: var(--gl-gold-blur); --glassy-loader-border: var(--gl-gold-border); --glassy-loader-spinner-color: var(--gl-gold-color); }
71
+ .glassy-theme-ocean { --glassy-loader-bg: var(--gl-ocean-bg); --glassy-loader-blur: var(--gl-ocean-blur); --glassy-loader-border: var(--gl-ocean-border); --glassy-loader-spinner-color: var(--gl-ocean-color); }
72
+ .glassy-theme-sunset { --glassy-loader-bg: var(--gl-sunset-bg); --glassy-loader-blur: var(--gl-sunset-blur); --glassy-loader-border: var(--gl-sunset-border); --glassy-loader-spinner-color: var(--gl-sunset-color); }
73
+ .glassy-theme-holographic { --glassy-loader-bg: var(--gl-holographic-bg); --glassy-loader-blur: var(--gl-holographic-blur); --glassy-loader-border: var(--gl-holographic-border); --glassy-loader-spinner-color: var(--gl-holographic-color); }
74
+ .glassy-theme-neon-pink { --glassy-loader-bg: var(--gl-neon-pink-bg); --glassy-loader-blur: 10px; --glassy-loader-border: var(--gl-neon-pink-border); --glassy-loader-spinner-color: var(--gl-neon-pink-color); }
75
+
76
+ /* Luxury Mesh Themes */
77
+ .glassy-theme-midnight-gold {
78
+ --glassy-loader-bg: #0a0a0a;
79
+ background-image:
80
+ radial-gradient(at 0% 0%, hsla(45, 100%, 50%, 0.15) 0px, transparent 50%),
81
+ radial-gradient(at 100% 0%, hsla(35, 100%, 40%, 0.1) 0px, transparent 50%),
82
+ radial-gradient(at 50% 100%, hsla(45, 80%, 30%, 0.1) 0px, transparent 50%);
83
+ --glassy-loader-spinner-color: #d4af37;
84
+ --glassy-loader-text-color: #d4af37;
85
+ }
86
+
87
+ .glassy-theme-champagne {
88
+ --glassy-loader-bg: #fdfbf7;
89
+ background-image:
90
+ radial-gradient(at 20% 30%, hsla(36, 100%, 95%, 1) 0px, transparent 50%),
91
+ radial-gradient(at 80% 10%, hsla(42, 60%, 90%, 1) 0px, transparent 50%);
92
+ --glassy-loader-spinner-color: #c5a059;
93
+ --glassy-loader-text-color: #4a3e2e;
94
+ }
95
+
96
+ .glassy-theme-royal {
97
+ --glassy-loader-bg: #1a0b2e;
98
+ background-image:
99
+ radial-gradient(at 10% 10%, hsla(280, 60%, 20%, 1) 0px, transparent 50%),
100
+ radial-gradient(at 90% 20%, hsla(320, 50%, 15%, 1) 0px, transparent 50%);
101
+ --glassy-loader-spinner-color: #e0b0ff;
102
+ --glassy-loader-text-color: #e0b0ff;
103
+ }
104
+
105
+ .glassy-theme-liquid-mesh {
106
+ --glassy-loader-bg: #0f172a;
107
+ background-image:
108
+ radial-gradient(at 0% 0%, #1e293b 0, transparent 50%),
109
+ radial-gradient(at 100% 100%, #334155 0, transparent 50%);
110
+ background-size: 200% 200%;
111
+ animation: glassy-mesh-move 10s ease infinite;
112
+ --glassy-loader-spinner-color: #38bdf8;
113
+ }
114
+
115
+ @keyframes glassy-mesh-move {
116
+ 0% { background-position: 0% 0%; }
117
+ 50% { background-position: 100% 100%; }
118
+ 100% { background-position: 0% 0%; }
119
+ }
120
+
121
+ /* responsive adjustments */
122
+ @media (max-width: 640px) {
123
+ .glassy-loader { transform: scale(0.8); }
124
+ }