loading-state-zoo 0.1.1 → 0.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.
- package/README.md +4 -4
- package/dist/index.cjs +111 -30
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +15 -3
- package/dist/index.d.ts +15 -3
- package/dist/index.js +111 -30
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +111 -30
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +59 -1
- package/dist/react.d.ts +59 -1
- package/dist/react.js +111 -30
- package/dist/react.js.map +1 -1
- package/dist/theme.css +142 -0
- package/docs/components.json +119 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ Think of it as a small zoo of loading animals. You pick an animal, put it in you
|
|
|
9
9
|
- **Smooth.** Only `transform` and `opacity` ever animate, so it stays at 60fps even on phones.
|
|
10
10
|
- **Tunable.** Every color, size, speed AND every keyframe number is customizable (see [Colors & sizes](#colors-and-sizes) and [Tune the keyframes](#tune-the-keyframes)).
|
|
11
11
|
|
|
12
|
-
> Looking for AI-friendly docs? See **
|
|
12
|
+
> Looking for AI-friendly docs? See the **Loading State Zoo documentation site** → <https://loading-state-zoo.pages.dev/docs>
|
|
13
13
|
|
|
14
14
|
---
|
|
15
15
|
|
|
@@ -563,7 +563,7 @@ Variables: `--lz-surface` · `--lz-sheen` (sweep light color) · `--lz-radius`
|
|
|
563
563
|
|
|
564
564
|
**Q: Do I need a privacy policy for this package?** No. It's a code library, not a service, and it collects nothing.
|
|
565
565
|
|
|
566
|
-
**Q: Can I use it in my commercial app?** Yes —
|
|
566
|
+
**Q: Can I use it in my commercial app?** Yes — it's free for personal and commercial projects.
|
|
567
567
|
|
|
568
568
|
**Q: Can I change sizes and colors?** Yes — attributes, React props, or CSS variables. See [Colors and sizes](#colors-and-sizes).
|
|
569
569
|
|
|
@@ -573,7 +573,7 @@ Variables: `--lz-surface` · `--lz-sheen` (sweep light color) · `--lz-radius`
|
|
|
573
573
|
|
|
574
574
|
## For AI assistants (LLMs, coding agents)
|
|
575
575
|
|
|
576
|
-
|
|
576
|
+
Full human- and AI-friendly documentation lives at **<https://loading-state-zoo.pages.dev/docs>**. The packaged release also ships `docs/AI.md` (a condensed, machine-honest summary) and `docs/components.json` (the full structured spec for every component) if you want them offline.
|
|
577
577
|
|
|
578
578
|
Key facts an AI should always know:
|
|
579
579
|
|
|
@@ -585,4 +585,4 @@ Key facts an AI should always know:
|
|
|
585
585
|
|
|
586
586
|
## License
|
|
587
587
|
|
|
588
|
-
|
|
588
|
+
Free to use in personal and commercial projects. No fee, no attribution required (but appreciated).
|
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var Ae=Object.defineProperty;var Ge=Object.getOwnPropertyDescriptor;var Pe=Object.getOwnPropertyNames;var Le=Object.prototype.hasOwnProperty;var we=e=>{throw TypeError(e)};var Ne=(e,i)=>{for(var t in i)Ae(e,t,{get:i[t],enumerable:!0})},Ie=(e,i,t,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of Pe(i))!Le.call(e,o)&&o!==t&&Ae(e,o,{get:()=>i[o],enumerable:!(s=Ge(i,o))||s.enumerable});return e};var Oe=e=>Ie(Ae({},"__esModule",{value:!0}),e);var ye=(e,i,t)=>i.has(e)||we("Cannot "+t);var ke=(e,i,t)=>(ye(e,i,"read from private field"),t?t.call(e):i.get(e)),Ee=(e,i,t)=>i.has(e)?we("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(e):i.set(e,t),Se=(e,i,t,s)=>(ye(e,i,"write to private field"),s?s.call(e,t):i.set(e,t),t);var Ze={};Ne(Ze,{ARC_SPINNER_TAG:()=>$,BOUNCING_DOTS_TAG:()=>N,BREATHING_PULSE_TAG:()=>ae,DOT_GRID_WAVE_TAG:()=>Y,ELLIPSIS_TAG:()=>me,EQUALIZER_TAG:()=>oe,EYES_TAG:()=>ee,HELIX_DOTS_TAG:()=>C,INDETERMINATE_PROGRESS_BAR_TAG:()=>ce,KEYFRAMES:()=>Te,LZPattern:()=>r,MATERIAL_DOUBLE_ARC_TAG:()=>K,MORPHING_SQUARE_TAG:()=>re,ORBIT_DOTS_TAG:()=>Q,ORBIT_RING_DOTS_TAG:()=>j,PROGRESS_BAR_TAG:()=>ve,PROGRESS_RING_TAG:()=>ne,SCAN_SWEEP_TAG:()=>X,SCOPED_CSS:()=>P,SKELETON_CARD_TAG:()=>ge,SKELETON_LIST_TAG:()=>xe,SKELETON_SHIMMER_TAG:()=>fe,TYPING_DOTS_TAG:()=>O,WAVE_DOTS_TAG:()=>M,define:()=>a,defineAll:()=>_e,defineArcSpinner:()=>h,defineBouncingDots:()=>c,defineBreathingPulse:()=>A,defineDotGridWave:()=>m,defineEllipsis:()=>E,defineEqualizer:()=>T,defineEyes:()=>x,defineHelixDots:()=>z,defineIndeterminateProgressBar:()=>y,defineMaterialDoubleArc:()=>v,defineMorphingSquare:()=>_,defineOrbitDots:()=>g,defineOrbitRingDots:()=>b,defineProgressBar:()=>S,defineProgressRing:()=>w,defineScanSweep:()=>u,defineSkeletonCard:()=>R,defineSkeletonList:()=>G,defineSkeletonShimmer:()=>k,defineTypingDots:()=>p,defineWaveDots:()=>f});module.exports=Oe(Ze);var Te=`
|
|
2
2
|
@keyframes lz-spin { to { transform: rotate(360deg); } }
|
|
3
3
|
@keyframes lz-spin-reverse { to { transform: rotate(-360deg); } }
|
|
4
4
|
@keyframes lz-dot-bounce {
|
|
@@ -59,7 +59,12 @@
|
|
|
59
59
|
50% { transform: scale(1); opacity: 1; }
|
|
60
60
|
100% { transform: scale(var(--lz-grid-min, 0.3)); opacity: var(--lz-grid-fade, 0.15); }
|
|
61
61
|
}
|
|
62
|
-
|
|
62
|
+
@keyframes lz-ellipsis-dot {
|
|
63
|
+
0%, 20% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }
|
|
64
|
+
40%, 80% { opacity: 1; transform: scale(1); }
|
|
65
|
+
100% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }
|
|
66
|
+
}
|
|
67
|
+
`,P=`
|
|
63
68
|
:host {
|
|
64
69
|
display: inline-flex;
|
|
65
70
|
font-size: var(--lz-size, 44px);
|
|
@@ -68,9 +73,9 @@
|
|
|
68
73
|
.lz-root {
|
|
69
74
|
display: contents;
|
|
70
75
|
}
|
|
71
|
-
${
|
|
72
|
-
`;var
|
|
73
|
-
${this.css}</style><div class="lz-root"></div>`,this._rootEl=
|
|
76
|
+
${Te}
|
|
77
|
+
`;var De=typeof HTMLElement<"u",Me=De?HTMLElement:class{},d,r=class extends Me{constructor(){super(...arguments);Ee(this,d,!1)}connectedCallback(){let t=this.shadowRoot??this.attachShadow({mode:"open"});t.innerHTML=`<style>${P}
|
|
78
|
+
${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".lz-root"),Se(this,d,!0),this.paint()}attributeChangedCallback(){ke(this,d)&&this.paint()}paint(){this.sync();let t=this._rootEl;t&&(t.innerHTML=this.template())}num(t,s){let o=this.getAttribute(t);if(o===null||o==="")return s;let l=Number(o);return Number.isFinite(l)?l:s}varPx(t,s,o){let l=this.getAttribute(s);l!==null&&l!==""&&Number.isFinite(Number(l))?this.style.setProperty(t,`${Number(l)}px`):this.style.removeProperty(t)}varNum(t,s,o){let l=this.getAttribute(s);l!==null&&l!==""&&Number.isFinite(Number(l))?this.style.setProperty(t,String(Number(l))):this.style.removeProperty(t)}varRaw(t,s,o){let l=this.getAttribute(s);l!==null&&l!==""?this.style.setProperty(t,l):this.style.removeProperty(t)}};d=new WeakMap,r.observedAttributes=[];function a(e,i){typeof customElements>"u"||customElements.get(e)||customElements.define(e,i)}var N="lz-bouncing-dots",L=class extends r{constructor(){super(...arguments);this.css=`
|
|
74
79
|
:host { font-size: var(--lz-size, 8px); }
|
|
75
80
|
.lz-dots { display: flex; gap: 0.7em; }
|
|
76
81
|
.lz-dot {
|
|
@@ -80,7 +85,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
80
85
|
}
|
|
81
86
|
.lz-dot:nth-child(2) { animation-delay: 0.15s; }
|
|
82
87
|
.lz-dot:nth-child(3) { animation-delay: 0.3s; }
|
|
83
|
-
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
88
|
+
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};L.observedAttributes=["size","color","speed"];function c(){a(N,L)}var O="lz-typing-dots",I=class extends r{constructor(){super(...arguments);this.css=`
|
|
84
89
|
:host { font-size: var(--lz-size, 8px); }
|
|
85
90
|
.lz-dots { display: flex; gap: 0.8em; }
|
|
86
91
|
.lz-dot {
|
|
@@ -90,7 +95,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
90
95
|
}
|
|
91
96
|
.lz-dot:nth-child(2) { animation-delay: -0.18s; }
|
|
92
97
|
.lz-dot:nth-child(3) { animation-delay: -0.36s; }
|
|
93
|
-
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
98
|
+
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};I.observedAttributes=["size","color","speed"];function p(){a(O,I)}var M="lz-wave-dots",D=class extends r{constructor(){super(...arguments);this.css=`
|
|
94
99
|
:host { font-size: var(--lz-size, 8px); }
|
|
95
100
|
.lz-dots { display: flex; gap: 0.6em; }
|
|
96
101
|
.lz-dot {
|
|
@@ -101,7 +106,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
101
106
|
.lz-dot:nth-child(2) { animation-delay: -0.1s; }
|
|
102
107
|
.lz-dot:nth-child(3) { animation-delay: -0.2s; }
|
|
103
108
|
.lz-dot:nth-child(4) { animation-delay: -0.3s; }
|
|
104
|
-
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
109
|
+
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};D.observedAttributes=["size","color","speed"];function f(){a(M,D)}var C="lz-helix-dots",Be=1.4,B=class extends r{constructor(){super(...arguments);this.css=`
|
|
105
110
|
:host { font-size: var(--lz-size, 6px); }
|
|
106
111
|
.lz-dots { display: flex; gap: 0.9em; }
|
|
107
112
|
.lz-dot {
|
|
@@ -109,7 +114,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
109
114
|
background: var(--lz-color, #f5f5f7);
|
|
110
115
|
animation: lz-helix-bob calc(1.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
111
116
|
}
|
|
112
|
-
`}template(){let
|
|
117
|
+
`}template(){let t=Math.max(1,this.num("count",10)),s='<div class="lz-dots" role="status" aria-label="Loading">';for(let o=0;o<t;o++)s+=`<span class="lz-dot" style="animation-delay:-${(Be/t*o).toFixed(3)}s"></span>`;return`${s}</div>`}sync(){this.varPx("--lz-size","size",6),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};B.observedAttributes=["size","count","color","speed"];function z(){a(C,B)}var Y="lz-dot-grid-wave",H=class extends r{constructor(){super(...arguments);this.css=`
|
|
113
118
|
:host { font-size: var(--lz-size, 6px); }
|
|
114
119
|
.lz-grid {
|
|
115
120
|
display: grid;
|
|
@@ -121,10 +126,10 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
121
126
|
background: var(--lz-color, #f5f5f7);
|
|
122
127
|
animation: lz-grid-dot-wave calc(1.2s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
123
128
|
}
|
|
124
|
-
`}template(){let
|
|
129
|
+
`}template(){let t=Math.max(1,this.num("rows",4)),s=Math.max(1,this.num("cols",5)),o='<div class="lz-grid" role="status" aria-label="Loading">';for(let l=0;l<t;l++)for(let n=0;n<s;n++)o+=`<span class="lz-dot" style="animation-delay:-${((l+n)*.08).toFixed(3)}s"></span>`;return`${o}</div>`}sync(){this.varPx("--lz-size","size",6),this.varNum("--lz-cols","cols",5),this.varPx("--lz-grid-gap","gap",12),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};H.observedAttributes=["rows","cols","size","gap","color","speed"];function m(){a(Y,H)}var $="lz-arc-spinner",Ce=`
|
|
125
130
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
126
131
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
127
|
-
`,
|
|
132
|
+
`,Z=class extends r{constructor(){super(...arguments);this.css=`
|
|
128
133
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; }
|
|
129
134
|
.lz-ring {
|
|
130
135
|
width: 100%; height: 100%; border-radius: 50%;
|
|
@@ -134,28 +139,28 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
134
139
|
var(--lz-color, #f5f5f7) 110deg,
|
|
135
140
|
transparent 111deg
|
|
136
141
|
);
|
|
137
|
-
${
|
|
142
|
+
${Ce}
|
|
138
143
|
animation: lz-spin calc(1s * var(--lz-speed, 1)) linear infinite;
|
|
139
144
|
}
|
|
140
|
-
`}template(){return'<div class="lz-ring" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
145
|
+
`}template(){return'<div class="lz-ring" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};Z.observedAttributes=["size","stroke-width","color","speed"];function h(){a($,Z)}var K="lz-material-double-arc",He=`
|
|
141
146
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
142
147
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
143
|
-
`,
|
|
148
|
+
`,U="var(--lz-color-weak, color-mix(in srgb, var(--lz-color, #f5f5f7) 95%, transparent))",W=class extends r{constructor(){super(...arguments);this.css=`
|
|
144
149
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
145
150
|
.lz-arc {
|
|
146
151
|
position: absolute; inset: 0; border-radius: 50%;
|
|
147
|
-
${
|
|
152
|
+
${He}
|
|
148
153
|
}
|
|
149
154
|
.lz-arc-a {
|
|
150
|
-
background: conic-gradient(from 0deg, ${
|
|
155
|
+
background: conic-gradient(from 0deg, ${U} 0deg, ${U} 135deg, transparent 136deg);
|
|
151
156
|
animation: lz-spin calc(1s * var(--lz-speed, 1)) linear infinite;
|
|
152
157
|
}
|
|
153
158
|
.lz-arc-b {
|
|
154
159
|
opacity: 0.6;
|
|
155
|
-
background: conic-gradient(from 200deg, ${
|
|
160
|
+
background: conic-gradient(from 200deg, ${U} 0deg, ${U} 90deg, transparent 91deg);
|
|
156
161
|
animation: lz-spin-reverse calc(2.4s * var(--lz-speed, 1)) linear infinite;
|
|
157
162
|
}
|
|
158
|
-
`}template(){return'<div class="lz-arc lz-arc-a" role="status" aria-label="Loading"></div><div class="lz-arc lz-arc-b"></div>'}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varNum("--lz-speed","speed",1)}};
|
|
163
|
+
`}template(){return'<div class="lz-arc lz-arc-a" role="status" aria-label="Loading"></div><div class="lz-arc lz-arc-b"></div>'}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varNum("--lz-speed","speed",1)}};W.observedAttributes=["size","stroke-width","color","speed"];function v(){a(K,W)}var X="lz-scan-sweep",q=class extends r{constructor(){super(...arguments);this.css=`
|
|
159
164
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
160
165
|
.lz-ring {
|
|
161
166
|
position: absolute; inset: 0; border-radius: 50%;
|
|
@@ -182,7 +187,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
182
187
|
mask: radial-gradient(closest-side, #000 100%);
|
|
183
188
|
animation: lz-spin calc(2.5s * var(--lz-speed, 1)) linear infinite;
|
|
184
189
|
}
|
|
185
|
-
`}template(){return'<div class="lz-ring" role="status" aria-label="Loading"></div><div class="lz-ring-inner"></div><div class="lz-core"></div><div class="lz-sweep"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varRaw("--lz-color-sweep","color-sweep"),this.varNum("--lz-speed","speed",1)}};
|
|
190
|
+
`}template(){return'<div class="lz-ring" role="status" aria-label="Loading"></div><div class="lz-ring-inner"></div><div class="lz-core"></div><div class="lz-sweep"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varRaw("--lz-color-sweep","color-sweep"),this.varNum("--lz-speed","speed",1)}};q.observedAttributes=["size","color","speed"];function u(){a(X,q)}var Q="lz-orbit-dots",F=class extends r{constructor(){super(...arguments);this.css=`
|
|
186
191
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
187
192
|
.lz-orbit {
|
|
188
193
|
position: absolute; inset: 0;
|
|
@@ -197,7 +202,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
197
202
|
.lz-dot:nth-child(1) { transform: rotate(0deg) translateY(-0.36em); }
|
|
198
203
|
.lz-dot:nth-child(2) { transform: rotate(120deg) translateY(-0.36em); }
|
|
199
204
|
.lz-dot:nth-child(3) { transform: rotate(240deg) translateY(-0.36em); }
|
|
200
|
-
`}template(){return'<div class="lz-orbit" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varNum("--lz-speed","speed",1)}}
|
|
205
|
+
`}template(){return'<div class="lz-orbit" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varNum("--lz-speed","speed",1)}};F.observedAttributes=["size","color","speed"];function g(){a(Q,F)}var j="lz-orbit-ring-dots",Re=8,V=class extends r{constructor(){super(...arguments);this.css=`
|
|
201
206
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
202
207
|
.lz-orbit { position: absolute; inset: 0; }
|
|
203
208
|
.lz-dot {
|
|
@@ -208,7 +213,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
208
213
|
background: var(--lz-color, #f5f5f7);
|
|
209
214
|
animation: lz-orbit-ring-dot calc(1.2s * var(--lz-speed, 1)) linear infinite;
|
|
210
215
|
}
|
|
211
|
-
`}template(){let
|
|
216
|
+
`}template(){let t='<div class="lz-orbit" role="status" aria-label="Loading">';for(let s=0;s<Re;s++){let o=360/Re*s;t+=`<span class="lz-dot" style="transform:rotate(${o}deg) translateY(calc(-0.5em + (var(--lz-dot-size, 0.18em) / 2)));animation-delay:-${(s*.15).toFixed(2)}s"></span>`}return`${t}</div>`}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-dot-size","dot-size",7.92),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};V.observedAttributes=["size","dot-size","color","speed"];function b(){a(j,V)}var ee="lz-eyes",J=class extends r{constructor(){super(...arguments);this.css=`
|
|
212
217
|
:host { font-size: var(--lz-size, 44px); }
|
|
213
218
|
.lz-eyes { display: flex; gap: 0.24em; }
|
|
214
219
|
.lz-eye {
|
|
@@ -222,7 +227,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
222
227
|
background: var(--lz-pupil, rgba(0, 0, 0, 0.85));
|
|
223
228
|
animation: lz-eye-gaze calc(1.6s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
224
229
|
}
|
|
225
|
-
`}template(){return'<div class="lz-eyes" role="status" aria-label="Loading"><div class="lz-eye"><span class="lz-pupil"></span></div><div class="lz-eye"><span class="lz-pupil"></span></div></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-pupil","pupil"),this.varNum("--lz-speed","speed",1)}};
|
|
230
|
+
`}template(){return'<div class="lz-eyes" role="status" aria-label="Loading"><div class="lz-eye"><span class="lz-pupil"></span></div><div class="lz-eye"><span class="lz-pupil"></span></div></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-pupil","pupil"),this.varNum("--lz-speed","speed",1)}};J.observedAttributes=["size","color","speed"];function x(){a(ee,J)}var re="lz-morphing-square",te=class extends r{constructor(){super(...arguments);this.css=`
|
|
226
231
|
:host {
|
|
227
232
|
font-size: var(--lz-size, 44px);
|
|
228
233
|
width: 1em; height: 1em;
|
|
@@ -230,14 +235,14 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
230
235
|
box-shadow: 0 0 calc(0.41 * var(--lz-size, 44px)) var(--lz-glow, color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent));
|
|
231
236
|
animation: lz-shape-morph calc(2s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
232
237
|
}
|
|
233
|
-
`}template(){return'<div role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-glow","glow"),this.varNum("--lz-speed","speed",1)}};
|
|
238
|
+
`}template(){return'<div role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-glow","glow"),this.varNum("--lz-speed","speed",1)}};te.observedAttributes=["size","accent","speed"];function _(){a(re,te)}var ae="lz-breathing-pulse",ie=class extends r{constructor(){super(...arguments);this.css=`
|
|
234
239
|
:host {
|
|
235
240
|
font-size: var(--lz-size, 36px);
|
|
236
241
|
width: 1em; height: 1em; border-radius: 50%;
|
|
237
242
|
background: var(--lz-color, #f5f5f7);
|
|
238
243
|
animation: lz-pulse-breath calc(2.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
239
244
|
}
|
|
240
|
-
`}template(){return'<div role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",36),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
245
|
+
`}template(){return'<div role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",36),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};ie.observedAttributes=["size","color","speed"];function A(){a(ae,ie)}var oe="lz-equalizer",se=class extends r{constructor(){super(...arguments);this.css=`
|
|
241
246
|
:host { font-size: var(--lz-size, 22px); }
|
|
242
247
|
.lz-eq { display: flex; align-items: flex-end; gap: var(--lz-gap, 3px); }
|
|
243
248
|
.lz-bar {
|
|
@@ -250,12 +255,12 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
250
255
|
.lz-bar:nth-child(2) { animation-delay: 0.12s; }
|
|
251
256
|
.lz-bar:nth-child(3) { animation-delay: 0.24s; }
|
|
252
257
|
.lz-bar:nth-child(4) { animation-delay: 0.36s; }
|
|
253
|
-
`}template(){return'<div class="lz-eq" role="status" aria-label="Loading"><span class="lz-bar"></span><span class="lz-bar"></span><span class="lz-bar"></span><span class="lz-bar"></span></div>'}sync(){this.varPx("--lz-size","size",22),this.varPx("--lz-bar-width","bar-width",3),this.varPx("--lz-gap","gap",3),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
258
|
+
`}template(){return'<div class="lz-eq" role="status" aria-label="Loading"><span class="lz-bar"></span><span class="lz-bar"></span><span class="lz-bar"></span><span class="lz-bar"></span></div>'}sync(){this.varPx("--lz-size","size",22),this.varPx("--lz-bar-width","bar-width",3),this.varPx("--lz-gap","gap",3),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};se.observedAttributes=["size","bar-width","gap","color","speed"];function T(){a(oe,se)}var ne="lz-progress-ring",Ye=`
|
|
254
259
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
255
260
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
256
|
-
`,
|
|
261
|
+
`,le=class extends r{constructor(){super(...arguments);this.css=`
|
|
257
262
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
258
|
-
.lz-ring { position: absolute; inset: 0; border-radius: 50%; ${
|
|
263
|
+
.lz-ring { position: absolute; inset: 0; border-radius: 50%; ${Ye} }
|
|
259
264
|
.lz-track {
|
|
260
265
|
background: conic-gradient(var(--lz-track, rgba(255, 255, 255, 0.15)) 0deg, var(--lz-track, rgba(255, 255, 255, 0.15)) 360deg);
|
|
261
266
|
}
|
|
@@ -263,7 +268,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
263
268
|
background: conic-gradient(var(--lz-color, #f5f5f7) calc(var(--lz-percent, 0) * 3.6deg), transparent 0deg);
|
|
264
269
|
transition: background 0.2s ease;
|
|
265
270
|
}
|
|
266
|
-
`}template(){return`<div class="lz-ring lz-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Math.max(0,Math.min(100,this.num("percent",0)))}"></div><div class="lz-ring lz-fill"></div>`}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-track","track-color"),this.varNum("--lz-speed","speed",1),this.varNum("--lz-percent","percent",0)}};
|
|
271
|
+
`}template(){return`<div class="lz-ring lz-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Math.max(0,Math.min(100,this.num("percent",0)))}"></div><div class="lz-ring lz-fill"></div>`}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-track","track-color"),this.varNum("--lz-speed","speed",1),this.varNum("--lz-percent","percent",0)}};le.observedAttributes=["size","stroke-width","percent","color","track-color","speed"];function w(){a(ne,le)}var ce="lz-indeterminate-progress-bar",de=class extends r{constructor(){super(...arguments);this.css=`
|
|
267
272
|
:host {
|
|
268
273
|
position: relative; display: inline-block;
|
|
269
274
|
width: var(--lz-width, 160px); height: var(--lz-height, 6px);
|
|
@@ -276,7 +281,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
276
281
|
background: var(--lz-accent, #0a84ff);
|
|
277
282
|
animation: lz-indeterminate-slide calc(1.6s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
278
283
|
}
|
|
279
|
-
`}template(){return'<div class="lz-bar" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-width","width",160),this.varPx("--lz-height","height",6),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varNum("--lz-speed","speed",1)}};
|
|
284
|
+
`}template(){return'<div class="lz-bar" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-width","width",160),this.varPx("--lz-height","height",6),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varNum("--lz-speed","speed",1)}};de.observedAttributes=["width","height","accent","track-color","speed"];function y(){a(ce,de)}var fe="lz-skeleton-shimmer",pe=class extends r{constructor(){super(...arguments);this.css=`
|
|
280
285
|
:host {
|
|
281
286
|
position: relative; display: inline-block;
|
|
282
287
|
width: var(--lz-width, 120px); height: var(--lz-height, 28px);
|
|
@@ -288,5 +293,81 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
288
293
|
background: linear-gradient(to right, transparent, var(--lz-sheen, rgba(255, 255, 255, 0.1)), transparent);
|
|
289
294
|
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
290
295
|
}
|
|
291
|
-
`}template(){return'<div class="lz-sheen" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-width","width",120),this.varPx("--lz-height","height",28),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varRaw("--lz-sheen","sheen"),this.varNum("--lz-speed","speed",1)}};
|
|
296
|
+
`}template(){return'<div class="lz-sheen" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-width","width",120),this.varPx("--lz-height","height",28),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varRaw("--lz-sheen","sheen"),this.varNum("--lz-speed","speed",1)}};pe.observedAttributes=["width","height","track-color","speed"];function k(){a(fe,pe)}var me="lz-ellipsis",ze=class extends r{constructor(){super(...arguments);this.css=`
|
|
297
|
+
:host {
|
|
298
|
+
display: inline-flex; gap: 0.2em; align-items: center;
|
|
299
|
+
font-size: var(--lz-size, 8px); line-height: 1;
|
|
300
|
+
}
|
|
301
|
+
.lz-dot {
|
|
302
|
+
width: 1em; height: 1em; border-radius: 50%;
|
|
303
|
+
background: var(--lz-color, #f5f5f7);
|
|
304
|
+
animation: lz-ellipsis-dot calc(1.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
305
|
+
}
|
|
306
|
+
.lz-dot:nth-child(2) { animation-delay: -0.45s; }
|
|
307
|
+
.lz-dot:nth-child(3) { animation-delay: -0.9s; }
|
|
308
|
+
`}template(){return'<span class="lz-dot" role="status" aria-label="Loading"></span><span class="lz-dot"></span><span class="lz-dot"></span>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};ze.observedAttributes=["size","color","speed"];function E(){a(me,ze)}var ve="lz-progress-bar",he=class extends r{constructor(){super(...arguments);this.css=`
|
|
309
|
+
:host {
|
|
310
|
+
display: inline-block; position: relative;
|
|
311
|
+
width: var(--lz-width, 160px); height: var(--lz-height, 6px);
|
|
312
|
+
border-radius: calc(var(--lz-height, 6px) / 2);
|
|
313
|
+
overflow: hidden;
|
|
314
|
+
background: var(--lz-track, rgba(255,255,255,0.15));
|
|
315
|
+
}
|
|
316
|
+
.lz-fill {
|
|
317
|
+
position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
|
|
318
|
+
transform-origin: left;
|
|
319
|
+
background: var(--lz-color, #f5f5f7);
|
|
320
|
+
border-radius: inherit;
|
|
321
|
+
}
|
|
322
|
+
`}template(){return'<div class="lz-fill"></div>'}sync(){this.varPx("--lz-width","width",160),this.varPx("--lz-height","height",6),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-track","track-color","rgba(255,255,255,0.15)"),this.varNum("--lz-speed","speed",1);let t=Math.max(0,Math.min(100,this.num("percent",0)));this.style.setProperty("--lz-percent",`${t}`);let s=this.shadowRoot?.querySelector(".lz-fill");s&&(s.style.transform=`scaleX(${t/100})`),this.setAttribute("aria-valuenow",String(t))}};he.observedAttributes=["width","height","percent","color","track-color","speed"];function S(){a(ve,he)}var ge="lz-skeleton-card",ue=class extends r{constructor(){super(...arguments);this.css=`
|
|
323
|
+
:host {
|
|
324
|
+
position: relative; display: inline-block;
|
|
325
|
+
width: var(--lz-width, 200px); height: var(--lz-height, 64px);
|
|
326
|
+
border-radius: var(--lz-radius, 10px); overflow: hidden;
|
|
327
|
+
background: var(--lz-surface, #1c1c1e);
|
|
328
|
+
}
|
|
329
|
+
.lz-card-row {
|
|
330
|
+
display: flex; gap: 10px; padding: 12px;
|
|
331
|
+
}
|
|
332
|
+
.lz-avatar {
|
|
333
|
+
width: 40px; height: 40px; border-radius: 50%;
|
|
334
|
+
background: rgba(255,255,255,0.08); flex-shrink: 0;
|
|
335
|
+
}
|
|
336
|
+
.lz-lines { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
|
|
337
|
+
.lz-line {
|
|
338
|
+
height: 8px; border-radius: 4px;
|
|
339
|
+
background: rgba(255,255,255,0.08);
|
|
340
|
+
}
|
|
341
|
+
.lz-line-short { width: 60%; }
|
|
342
|
+
.lz-sheen {
|
|
343
|
+
position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
|
|
344
|
+
background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
|
|
345
|
+
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
346
|
+
}
|
|
347
|
+
`}template(){return'<div class="lz-card-row" role="status" aria-label="Loading"><div class="lz-avatar"></div><div class="lz-lines"><div class="lz-line"></div><div class="lz-line lz-line-short"></div><div class="lz-line" style="width:80%"></div></div></div><div class="lz-sheen"></div>'}sync(){this.varPx("--lz-width","width",200),this.varPx("--lz-height","height",64),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varNum("--lz-speed","speed",1)}};ue.observedAttributes=["width","height","track-color","speed"];function R(){a(ge,ue)}var xe="lz-skeleton-list",be=class extends r{constructor(){super(...arguments);this.css=`
|
|
348
|
+
:host {
|
|
349
|
+
position: relative; display: block;
|
|
350
|
+
width: var(--lz-width, 180px);
|
|
351
|
+
border-radius: var(--lz-radius, 10px); overflow: hidden;
|
|
352
|
+
background: var(--lz-surface, #1c1c1e);
|
|
353
|
+
}
|
|
354
|
+
.lz-list-row {
|
|
355
|
+
display: flex; align-items: center; gap: 8px;
|
|
356
|
+
padding: 8px 12px;
|
|
357
|
+
}
|
|
358
|
+
.lz-list-avatar {
|
|
359
|
+
width: 28px; height: 28px; border-radius: 50%;
|
|
360
|
+
background: rgba(255,255,255,0.08); flex-shrink: 0;
|
|
361
|
+
}
|
|
362
|
+
.lz-list-line {
|
|
363
|
+
height: 8px; border-radius: 4px;
|
|
364
|
+
background: rgba(255,255,255,0.08); flex: 1;
|
|
365
|
+
}
|
|
366
|
+
.lz-list-line-fixed { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); }
|
|
367
|
+
.lz-sheen {
|
|
368
|
+
position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
|
|
369
|
+
background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
|
|
370
|
+
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
371
|
+
}
|
|
372
|
+
`}template(){let t=Math.max(1,Math.min(8,this.num("rows",4))),s=["100%","85%","92%","68%","95%","78%","88%","72%"],o='<div role="status" aria-label="Loading">';for(let l=0;l<t;l++){let n=s[l%s.length];o+=`<div class="lz-list-row"><div class="lz-list-avatar"></div><div class="lz-list-line" style="width:${n}"></div></div>`}return`${o}</div><div class="lz-sheen"></div>`}sync(){this.varPx("--lz-width","width",180),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varNum("--lz-speed","speed",1)}};be.observedAttributes=["width","rows","track-color","speed"];function G(){a(xe,be)}function _e(){c(),p(),f(),z(),m(),h(),v(),u(),g(),b(),x(),_(),A(),T(),w(),y(),k(),E(),S(),R(),G()}_e();0&&(module.exports={ARC_SPINNER_TAG,BOUNCING_DOTS_TAG,BREATHING_PULSE_TAG,DOT_GRID_WAVE_TAG,ELLIPSIS_TAG,EQUALIZER_TAG,EYES_TAG,HELIX_DOTS_TAG,INDETERMINATE_PROGRESS_BAR_TAG,KEYFRAMES,LZPattern,MATERIAL_DOUBLE_ARC_TAG,MORPHING_SQUARE_TAG,ORBIT_DOTS_TAG,ORBIT_RING_DOTS_TAG,PROGRESS_BAR_TAG,PROGRESS_RING_TAG,SCAN_SWEEP_TAG,SCOPED_CSS,SKELETON_CARD_TAG,SKELETON_LIST_TAG,SKELETON_SHIMMER_TAG,TYPING_DOTS_TAG,WAVE_DOTS_TAG,define,defineAll,defineArcSpinner,defineBouncingDots,defineBreathingPulse,defineDotGridWave,defineEllipsis,defineEqualizer,defineEyes,defineHelixDots,defineIndeterminateProgressBar,defineMaterialDoubleArc,defineMorphingSquare,defineOrbitDots,defineOrbitRingDots,defineProgressBar,defineProgressRing,defineScanSweep,defineSkeletonCard,defineSkeletonList,defineSkeletonShimmer,defineTypingDots,defineWaveDots});
|
|
292
373
|
//# sourceMappingURL=index.cjs.map
|