loading-state-zoo 0.3.0 → 0.4.1
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 +10 -115
- package/dist/index.cjs +153 -199
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -21
- package/dist/index.d.ts +3 -21
- package/dist/index.js +152 -198
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +149 -195
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +1 -64
- package/dist/react.d.ts +1 -64
- package/dist/react.js +149 -195
- package/dist/react.js.map +1 -1
- package/dist/theme.css +207 -284
- package/docs/AI.md +10 -11
- package/docs/components.json +1504 -428
- package/package.json +2 -2
package/docs/components.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
|
3
|
-
"$comment": "loading-state-zoo v0.
|
|
3
|
+
"$comment": "loading-state-zoo v0.4.1 — machine-readable spec. Source of truth for all 26 components. Defaults match the rendered site.",
|
|
4
4
|
"package": {
|
|
5
5
|
"name": "loading-state-zoo",
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "0.4.1",
|
|
7
7
|
"entrypoints": {
|
|
8
8
|
"webComponents": "loading-state-zoo",
|
|
9
9
|
"react": "loading-state-zoo/react",
|
|
@@ -65,12 +65,36 @@
|
|
|
65
65
|
}
|
|
66
66
|
],
|
|
67
67
|
"sharedCssVariables": [
|
|
68
|
-
{
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
{
|
|
68
|
+
{
|
|
69
|
+
"name": "--lz-color",
|
|
70
|
+
"default": "#f5f5f7",
|
|
71
|
+
"purpose": "Foreground color on all patterns"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"name": "--lz-accent",
|
|
75
|
+
"default": "#0a84ff",
|
|
76
|
+
"purpose": "Accent color on accent-using patterns"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": "--lz-speed",
|
|
80
|
+
"default": "1",
|
|
81
|
+
"purpose": "Duration multiplier"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"name": "--lz-surface",
|
|
85
|
+
"default": "#1c1c1e",
|
|
86
|
+
"purpose": "Track / skeleton background"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"name": "--lz-stroke",
|
|
90
|
+
"default": "4px",
|
|
91
|
+
"purpose": "Ring stroke width"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"name": "--lz-track",
|
|
95
|
+
"default": "rgba(255,255,255,0.15)",
|
|
96
|
+
"purpose": "Ring track / scan border color"
|
|
97
|
+
}
|
|
74
98
|
],
|
|
75
99
|
"components": [
|
|
76
100
|
{
|
|
@@ -80,19 +104,54 @@
|
|
|
80
104
|
"category": "Dots",
|
|
81
105
|
"role": "status",
|
|
82
106
|
"description": "Three round dots that hop up and down with a stagger.",
|
|
83
|
-
"useCases": [
|
|
84
|
-
|
|
107
|
+
"useCases": [
|
|
108
|
+
"loading a feed",
|
|
109
|
+
"small section refresh"
|
|
110
|
+
],
|
|
111
|
+
"defaults": {
|
|
112
|
+
"size": 8,
|
|
113
|
+
"color": "#f5f5f7",
|
|
114
|
+
"speed": 1
|
|
115
|
+
},
|
|
85
116
|
"attributes": [
|
|
86
|
-
{
|
|
87
|
-
|
|
88
|
-
|
|
117
|
+
{
|
|
118
|
+
"name": "size",
|
|
119
|
+
"reactProp": "size",
|
|
120
|
+
"type": "number",
|
|
121
|
+
"unit": "px",
|
|
122
|
+
"default": 8
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"name": "color",
|
|
126
|
+
"reactProp": "color",
|
|
127
|
+
"type": "string",
|
|
128
|
+
"default": "#f5f5f7"
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"name": "speed",
|
|
132
|
+
"reactProp": "speed",
|
|
133
|
+
"type": "number",
|
|
134
|
+
"default": 1
|
|
135
|
+
}
|
|
89
136
|
],
|
|
90
137
|
"cssVars": [
|
|
91
|
-
{
|
|
92
|
-
|
|
138
|
+
{
|
|
139
|
+
"name": "--lz-size",
|
|
140
|
+
"default": "8px",
|
|
141
|
+
"purpose": "Dot diameter"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"name": "--lz-color",
|
|
145
|
+
"default": "#f5f5f7",
|
|
146
|
+
"purpose": "Dot color"
|
|
147
|
+
}
|
|
93
148
|
],
|
|
94
149
|
"keyframeVars": [
|
|
95
|
-
{
|
|
150
|
+
{
|
|
151
|
+
"name": "--lz-bounce",
|
|
152
|
+
"default": "-10px",
|
|
153
|
+
"purpose": "Dot hop height"
|
|
154
|
+
}
|
|
96
155
|
],
|
|
97
156
|
"examples": {
|
|
98
157
|
"html": "<lz-bouncing-dots size=\"12\" color=\"#0a84ff\"></lz-bouncing-dots>",
|
|
@@ -106,17 +165,55 @@
|
|
|
106
165
|
"category": "Dots",
|
|
107
166
|
"role": "status",
|
|
108
167
|
"description": "Three dots pulsing in a typing rhythm.",
|
|
109
|
-
"useCases": [
|
|
110
|
-
|
|
168
|
+
"useCases": [
|
|
169
|
+
"chat",
|
|
170
|
+
"messaging",
|
|
171
|
+
"typing indicator"
|
|
172
|
+
],
|
|
173
|
+
"defaults": {
|
|
174
|
+
"size": 8,
|
|
175
|
+
"color": "#f5f5f7",
|
|
176
|
+
"speed": 1
|
|
177
|
+
},
|
|
111
178
|
"attributes": [
|
|
112
|
-
{
|
|
113
|
-
|
|
114
|
-
|
|
179
|
+
{
|
|
180
|
+
"name": "size",
|
|
181
|
+
"reactProp": "size",
|
|
182
|
+
"type": "number",
|
|
183
|
+
"unit": "px",
|
|
184
|
+
"default": 8
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"name": "color",
|
|
188
|
+
"reactProp": "color",
|
|
189
|
+
"type": "string",
|
|
190
|
+
"default": "#f5f5f7"
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"name": "speed",
|
|
194
|
+
"reactProp": "speed",
|
|
195
|
+
"type": "number",
|
|
196
|
+
"default": 1
|
|
197
|
+
}
|
|
198
|
+
],
|
|
199
|
+
"cssVars": [
|
|
200
|
+
{
|
|
201
|
+
"name": "--lz-size",
|
|
202
|
+
"default": "8px",
|
|
203
|
+
"purpose": "Dot diameter"
|
|
204
|
+
}
|
|
115
205
|
],
|
|
116
|
-
"cssVars": [{ "name": "--lz-size", "default": "8px", "purpose": "Dot diameter" }],
|
|
117
206
|
"keyframeVars": [
|
|
118
|
-
{
|
|
119
|
-
|
|
207
|
+
{
|
|
208
|
+
"name": "--lz-typing-min",
|
|
209
|
+
"default": "0.35",
|
|
210
|
+
"purpose": "Resting dot scale"
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
"name": "--lz-typing-peak",
|
|
214
|
+
"default": "1.15",
|
|
215
|
+
"purpose": "Peak dot scale"
|
|
216
|
+
}
|
|
120
217
|
],
|
|
121
218
|
"examples": {
|
|
122
219
|
"html": "<lz-typing-dots></lz-typing-dots>",
|
|
@@ -130,17 +227,54 @@
|
|
|
130
227
|
"category": "Dots",
|
|
131
228
|
"role": "status",
|
|
132
229
|
"description": "Four dots swelling across like a wave.",
|
|
133
|
-
"useCases": [
|
|
134
|
-
|
|
230
|
+
"useCases": [
|
|
231
|
+
"refresh",
|
|
232
|
+
"sync in progress"
|
|
233
|
+
],
|
|
234
|
+
"defaults": {
|
|
235
|
+
"size": 8,
|
|
236
|
+
"color": "#f5f5f7",
|
|
237
|
+
"speed": 1
|
|
238
|
+
},
|
|
135
239
|
"attributes": [
|
|
136
|
-
{
|
|
137
|
-
|
|
138
|
-
|
|
240
|
+
{
|
|
241
|
+
"name": "size",
|
|
242
|
+
"reactProp": "size",
|
|
243
|
+
"type": "number",
|
|
244
|
+
"unit": "px",
|
|
245
|
+
"default": 8
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
"name": "color",
|
|
249
|
+
"reactProp": "color",
|
|
250
|
+
"type": "string",
|
|
251
|
+
"default": "#f5f5f7"
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
"name": "speed",
|
|
255
|
+
"reactProp": "speed",
|
|
256
|
+
"type": "number",
|
|
257
|
+
"default": 1
|
|
258
|
+
}
|
|
259
|
+
],
|
|
260
|
+
"cssVars": [
|
|
261
|
+
{
|
|
262
|
+
"name": "--lz-size",
|
|
263
|
+
"default": "8px",
|
|
264
|
+
"purpose": "Dot diameter"
|
|
265
|
+
}
|
|
139
266
|
],
|
|
140
|
-
"cssVars": [{ "name": "--lz-size", "default": "8px", "purpose": "Dot diameter" }],
|
|
141
267
|
"keyframeVars": [
|
|
142
|
-
{
|
|
143
|
-
|
|
268
|
+
{
|
|
269
|
+
"name": "--lz-wave-min",
|
|
270
|
+
"default": "0.35",
|
|
271
|
+
"purpose": "Resting dot scale"
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
"name": "--lz-wave-peak",
|
|
275
|
+
"default": "1.1",
|
|
276
|
+
"purpose": "Peak dot scale"
|
|
277
|
+
}
|
|
144
278
|
],
|
|
145
279
|
"examples": {
|
|
146
280
|
"html": "<lz-wave-dots></lz-wave-dots>",
|
|
@@ -154,17 +288,57 @@
|
|
|
154
288
|
"category": "Dots",
|
|
155
289
|
"role": "status",
|
|
156
290
|
"description": "A row of dots bobbing like a travelling wave (helix).",
|
|
157
|
-
"useCases": [
|
|
158
|
-
|
|
291
|
+
"useCases": [
|
|
292
|
+
"data processing",
|
|
293
|
+
"playful waits"
|
|
294
|
+
],
|
|
295
|
+
"defaults": {
|
|
296
|
+
"size": 6,
|
|
297
|
+
"count": 10,
|
|
298
|
+
"color": "#f5f5f7",
|
|
299
|
+
"speed": 1
|
|
300
|
+
},
|
|
159
301
|
"attributes": [
|
|
160
|
-
{
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
302
|
+
{
|
|
303
|
+
"name": "size",
|
|
304
|
+
"reactProp": "size",
|
|
305
|
+
"type": "number",
|
|
306
|
+
"unit": "px",
|
|
307
|
+
"default": 6
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
"name": "count",
|
|
311
|
+
"reactProp": "count",
|
|
312
|
+
"type": "number",
|
|
313
|
+
"unit": "dots",
|
|
314
|
+
"default": 10
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
"name": "color",
|
|
318
|
+
"reactProp": "color",
|
|
319
|
+
"type": "string",
|
|
320
|
+
"default": "#f5f5f7"
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
"name": "speed",
|
|
324
|
+
"reactProp": "speed",
|
|
325
|
+
"type": "number",
|
|
326
|
+
"default": 1
|
|
327
|
+
}
|
|
328
|
+
],
|
|
329
|
+
"cssVars": [
|
|
330
|
+
{
|
|
331
|
+
"name": "--lz-size",
|
|
332
|
+
"default": "6px",
|
|
333
|
+
"purpose": "Dot diameter"
|
|
334
|
+
}
|
|
164
335
|
],
|
|
165
|
-
"cssVars": [{ "name": "--lz-size", "default": "6px", "purpose": "Dot diameter" }],
|
|
166
336
|
"keyframeVars": [
|
|
167
|
-
{
|
|
337
|
+
{
|
|
338
|
+
"name": "--lz-helix",
|
|
339
|
+
"default": "-12px",
|
|
340
|
+
"purpose": "Dot bob distance"
|
|
341
|
+
}
|
|
168
342
|
],
|
|
169
343
|
"examples": {
|
|
170
344
|
"html": "<lz-helix-dots count=\"14\"></lz-helix-dots>",
|
|
@@ -178,24 +352,89 @@
|
|
|
178
352
|
"category": "Dots",
|
|
179
353
|
"role": "status",
|
|
180
354
|
"description": "A grid of dots rippling outward from the top-left corner.",
|
|
181
|
-
"useCases": [
|
|
182
|
-
|
|
355
|
+
"useCases": [
|
|
356
|
+
"dashboards",
|
|
357
|
+
"brick layouts",
|
|
358
|
+
"empty panels"
|
|
359
|
+
],
|
|
360
|
+
"defaults": {
|
|
361
|
+
"size": 6,
|
|
362
|
+
"rows": 4,
|
|
363
|
+
"cols": 5,
|
|
364
|
+
"gap": 12,
|
|
365
|
+
"color": "#f5f5f7",
|
|
366
|
+
"speed": 1
|
|
367
|
+
},
|
|
183
368
|
"attributes": [
|
|
184
|
-
{
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
369
|
+
{
|
|
370
|
+
"name": "size",
|
|
371
|
+
"reactProp": "size",
|
|
372
|
+
"type": "number",
|
|
373
|
+
"unit": "px",
|
|
374
|
+
"default": 6
|
|
375
|
+
},
|
|
376
|
+
{
|
|
377
|
+
"name": "rows",
|
|
378
|
+
"reactProp": "rows",
|
|
379
|
+
"type": "number",
|
|
380
|
+
"unit": "rows",
|
|
381
|
+
"default": 4
|
|
382
|
+
},
|
|
383
|
+
{
|
|
384
|
+
"name": "cols",
|
|
385
|
+
"reactProp": "cols",
|
|
386
|
+
"type": "number",
|
|
387
|
+
"unit": "cols",
|
|
388
|
+
"default": 5
|
|
389
|
+
},
|
|
390
|
+
{
|
|
391
|
+
"name": "gap",
|
|
392
|
+
"reactProp": "gap",
|
|
393
|
+
"type": "number",
|
|
394
|
+
"unit": "px",
|
|
395
|
+
"default": 12
|
|
396
|
+
},
|
|
397
|
+
{
|
|
398
|
+
"name": "color",
|
|
399
|
+
"reactProp": "color",
|
|
400
|
+
"type": "string",
|
|
401
|
+
"default": "#f5f5f7"
|
|
402
|
+
},
|
|
403
|
+
{
|
|
404
|
+
"name": "speed",
|
|
405
|
+
"reactProp": "speed",
|
|
406
|
+
"type": "number",
|
|
407
|
+
"default": 1
|
|
408
|
+
}
|
|
190
409
|
],
|
|
191
410
|
"cssVars": [
|
|
192
|
-
{
|
|
193
|
-
|
|
194
|
-
|
|
411
|
+
{
|
|
412
|
+
"name": "--lz-size",
|
|
413
|
+
"default": "6px",
|
|
414
|
+
"purpose": "Dot diameter"
|
|
415
|
+
},
|
|
416
|
+
{
|
|
417
|
+
"name": "--lz-cols",
|
|
418
|
+
"default": "5",
|
|
419
|
+
"purpose": "Grid column count"
|
|
420
|
+
},
|
|
421
|
+
{
|
|
422
|
+
"name": "--lz-grid-gap",
|
|
423
|
+
"default": "12px",
|
|
424
|
+
"purpose": "Grid gap"
|
|
425
|
+
}
|
|
195
426
|
],
|
|
196
427
|
"keyframeVars": [
|
|
197
|
-
{
|
|
198
|
-
|
|
428
|
+
{
|
|
429
|
+
"name": "--lz-grid-min",
|
|
430
|
+
"default": "0.3",
|
|
431
|
+
"purpose": "Resting dot scale"
|
|
432
|
+
},
|
|
433
|
+
{
|
|
434
|
+
"name": "--lz-grid-fade",
|
|
435
|
+
"default": "0.15",
|
|
436
|
+
"purpose": "Resting dot opacity"
|
|
437
|
+
}
|
|
199
438
|
],
|
|
200
439
|
"examples": {
|
|
201
440
|
"html": "<lz-dot-grid-wave rows=\"4\" cols=\"6\" size=\"8\" gap=\"14\"></lz-dot-grid-wave>",
|
|
@@ -209,20 +448,60 @@
|
|
|
209
448
|
"category": "Dots",
|
|
210
449
|
"role": "status",
|
|
211
450
|
"description": "Three periods appearing in a typing rhythm.",
|
|
212
|
-
"useCases": [
|
|
213
|
-
|
|
451
|
+
"useCases": [
|
|
452
|
+
"chat",
|
|
453
|
+
"messaging",
|
|
454
|
+
"text queues"
|
|
455
|
+
],
|
|
456
|
+
"defaults": {
|
|
457
|
+
"size": 8,
|
|
458
|
+
"color": "#f5f5f7",
|
|
459
|
+
"speed": 1
|
|
460
|
+
},
|
|
214
461
|
"attributes": [
|
|
215
|
-
{
|
|
216
|
-
|
|
217
|
-
|
|
462
|
+
{
|
|
463
|
+
"name": "size",
|
|
464
|
+
"reactProp": "size",
|
|
465
|
+
"type": "number",
|
|
466
|
+
"unit": "px",
|
|
467
|
+
"default": 8
|
|
468
|
+
},
|
|
469
|
+
{
|
|
470
|
+
"name": "color",
|
|
471
|
+
"reactProp": "color",
|
|
472
|
+
"type": "string",
|
|
473
|
+
"default": "#f5f5f7"
|
|
474
|
+
},
|
|
475
|
+
{
|
|
476
|
+
"name": "speed",
|
|
477
|
+
"reactProp": "speed",
|
|
478
|
+
"type": "number",
|
|
479
|
+
"default": 1
|
|
480
|
+
}
|
|
218
481
|
],
|
|
219
482
|
"cssVars": [
|
|
220
|
-
{
|
|
221
|
-
|
|
483
|
+
{
|
|
484
|
+
"name": "--lz-size",
|
|
485
|
+
"default": "8px",
|
|
486
|
+
"purpose": "Dot diameter"
|
|
487
|
+
},
|
|
488
|
+
{
|
|
489
|
+
"name": "--lz-color",
|
|
490
|
+
"default": "#f5f5f7",
|
|
491
|
+
"purpose": "Dot color"
|
|
492
|
+
}
|
|
222
493
|
],
|
|
223
494
|
"keyframeVars": [
|
|
224
|
-
{
|
|
225
|
-
|
|
495
|
+
{
|
|
496
|
+
"name": "--lz-ellipsis-min",
|
|
497
|
+
"default": "0.8",
|
|
498
|
+
"purpose": "Resting dot scale"
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
"name": "--lz-ellipsis-fade",
|
|
502
|
+
"default": "0.15",
|
|
503
|
+
"purpose": "Resting dot opacity"
|
|
504
|
+
}
|
|
226
505
|
],
|
|
227
506
|
"examples": {
|
|
228
507
|
"html": "<lz-ellipsis size=\"10\" color=\"#0a84ff\"></lz-ellipsis>",
|
|
@@ -236,17 +515,54 @@
|
|
|
236
515
|
"category": "Spinners",
|
|
237
516
|
"role": "status",
|
|
238
517
|
"description": "One spinning arc ring (classic circular loader).",
|
|
239
|
-
"useCases": [
|
|
240
|
-
|
|
518
|
+
"useCases": [
|
|
519
|
+
"any circular wait"
|
|
520
|
+
],
|
|
521
|
+
"defaults": {
|
|
522
|
+
"size": 44,
|
|
523
|
+
"strokeWidth": 4,
|
|
524
|
+
"color": "#f5f5f7",
|
|
525
|
+
"speed": 1
|
|
526
|
+
},
|
|
241
527
|
"attributes": [
|
|
242
|
-
{
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
528
|
+
{
|
|
529
|
+
"name": "size",
|
|
530
|
+
"reactProp": "size",
|
|
531
|
+
"type": "number",
|
|
532
|
+
"unit": "px",
|
|
533
|
+
"default": 44
|
|
534
|
+
},
|
|
535
|
+
{
|
|
536
|
+
"name": "stroke-width",
|
|
537
|
+
"reactProp": "strokeWidth",
|
|
538
|
+
"type": "number",
|
|
539
|
+
"unit": "px",
|
|
540
|
+
"default": 4
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"name": "color",
|
|
544
|
+
"reactProp": "color",
|
|
545
|
+
"type": "string",
|
|
546
|
+
"default": "#f5f5f7"
|
|
547
|
+
},
|
|
548
|
+
{
|
|
549
|
+
"name": "speed",
|
|
550
|
+
"reactProp": "speed",
|
|
551
|
+
"type": "number",
|
|
552
|
+
"default": 1
|
|
553
|
+
}
|
|
246
554
|
],
|
|
247
555
|
"cssVars": [
|
|
248
|
-
{
|
|
249
|
-
|
|
556
|
+
{
|
|
557
|
+
"name": "--lz-size",
|
|
558
|
+
"default": "44px",
|
|
559
|
+
"purpose": "Ring box size"
|
|
560
|
+
},
|
|
561
|
+
{
|
|
562
|
+
"name": "--lz-stroke",
|
|
563
|
+
"default": "4px",
|
|
564
|
+
"purpose": "Ring thickness"
|
|
565
|
+
}
|
|
250
566
|
],
|
|
251
567
|
"keyframeVars": [],
|
|
252
568
|
"examples": {
|
|
@@ -261,19 +577,66 @@
|
|
|
261
577
|
"category": "Spinners",
|
|
262
578
|
"role": "status",
|
|
263
579
|
"description": "Two arcs spinning in opposite directions (Material look).",
|
|
264
|
-
"useCases": [
|
|
265
|
-
|
|
580
|
+
"useCases": [
|
|
581
|
+
"android-style apps",
|
|
582
|
+
"processing"
|
|
583
|
+
],
|
|
584
|
+
"defaults": {
|
|
585
|
+
"size": 44,
|
|
586
|
+
"strokeWidth": 4,
|
|
587
|
+
"color": "#f5f5f7",
|
|
588
|
+
"speed": 1
|
|
589
|
+
},
|
|
266
590
|
"attributes": [
|
|
267
|
-
{
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
591
|
+
{
|
|
592
|
+
"name": "size",
|
|
593
|
+
"reactProp": "size",
|
|
594
|
+
"type": "number",
|
|
595
|
+
"unit": "px",
|
|
596
|
+
"default": 44
|
|
597
|
+
},
|
|
598
|
+
{
|
|
599
|
+
"name": "stroke-width",
|
|
600
|
+
"reactProp": "strokeWidth",
|
|
601
|
+
"type": "number",
|
|
602
|
+
"unit": "px",
|
|
603
|
+
"default": 4
|
|
604
|
+
},
|
|
605
|
+
{
|
|
606
|
+
"name": "color",
|
|
607
|
+
"reactProp": "color",
|
|
608
|
+
"type": "string",
|
|
609
|
+
"default": "#f5f5f7"
|
|
610
|
+
},
|
|
611
|
+
{
|
|
612
|
+
"name": "color-weak",
|
|
613
|
+
"reactProp": "colorWeak",
|
|
614
|
+
"type": "string",
|
|
615
|
+
"default": "95% tint of color"
|
|
616
|
+
},
|
|
617
|
+
{
|
|
618
|
+
"name": "speed",
|
|
619
|
+
"reactProp": "speed",
|
|
620
|
+
"type": "number",
|
|
621
|
+
"default": 1
|
|
622
|
+
}
|
|
272
623
|
],
|
|
273
624
|
"cssVars": [
|
|
274
|
-
{
|
|
275
|
-
|
|
276
|
-
|
|
625
|
+
{
|
|
626
|
+
"name": "--lz-size",
|
|
627
|
+
"default": "44px",
|
|
628
|
+
"purpose": "Ring box size"
|
|
629
|
+
},
|
|
630
|
+
{
|
|
631
|
+
"name": "--lz-stroke",
|
|
632
|
+
"default": "4px",
|
|
633
|
+
"purpose": "Ring thickness"
|
|
634
|
+
},
|
|
635
|
+
{
|
|
636
|
+
"name": "--lz-color-weak",
|
|
637
|
+
"default": "color-mix(color 95%, transparent)",
|
|
638
|
+
"purpose": "Arc tint"
|
|
639
|
+
}
|
|
277
640
|
],
|
|
278
641
|
"keyframeVars": [],
|
|
279
642
|
"examples": {
|
|
@@ -287,22 +650,76 @@
|
|
|
287
650
|
"reactComponent": "ScanSweep",
|
|
288
651
|
"category": "Spinners",
|
|
289
652
|
"role": "status",
|
|
290
|
-
"description": "Concentric rings with a sweeping radar beam.",
|
|
291
|
-
"useCases": [
|
|
292
|
-
|
|
653
|
+
"description": "Concentric rings with crosshair ticks, a counter-rotating dial and a sweeping radar beam.",
|
|
654
|
+
"useCases": [
|
|
655
|
+
"scanning",
|
|
656
|
+
"searching",
|
|
657
|
+
"syncing"
|
|
658
|
+
],
|
|
659
|
+
"defaults": {
|
|
660
|
+
"size": 44,
|
|
661
|
+
"color": "#f5f5f7",
|
|
662
|
+
"speed": 1
|
|
663
|
+
},
|
|
293
664
|
"attributes": [
|
|
294
|
-
{
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
665
|
+
{
|
|
666
|
+
"name": "size",
|
|
667
|
+
"reactProp": "size",
|
|
668
|
+
"type": "number",
|
|
669
|
+
"unit": "px",
|
|
670
|
+
"default": 44
|
|
671
|
+
},
|
|
672
|
+
{
|
|
673
|
+
"name": "color",
|
|
674
|
+
"reactProp": "color",
|
|
675
|
+
"type": "string",
|
|
676
|
+
"default": "#f5f5f7"
|
|
677
|
+
},
|
|
678
|
+
{
|
|
679
|
+
"name": "color-weak",
|
|
680
|
+
"reactProp": "colorWeak",
|
|
681
|
+
"type": "string",
|
|
682
|
+
"default": "80% tint of color"
|
|
683
|
+
},
|
|
684
|
+
{
|
|
685
|
+
"name": "color-sweep",
|
|
686
|
+
"reactProp": "colorSweep",
|
|
687
|
+
"type": "string",
|
|
688
|
+
"default": "8% tint of color"
|
|
689
|
+
},
|
|
690
|
+
{
|
|
691
|
+
"name": "speed",
|
|
692
|
+
"reactProp": "speed",
|
|
693
|
+
"type": "number",
|
|
694
|
+
"default": 1
|
|
695
|
+
}
|
|
299
696
|
],
|
|
300
697
|
"cssVars": [
|
|
301
|
-
{
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
698
|
+
{
|
|
699
|
+
"name": "--lz-size",
|
|
700
|
+
"default": "44px",
|
|
701
|
+
"purpose": "Ring box size"
|
|
702
|
+
},
|
|
703
|
+
{
|
|
704
|
+
"name": "--lz-track",
|
|
705
|
+
"default": "rgba(255,255,255,0.12)",
|
|
706
|
+
"purpose": "Outer ring border"
|
|
707
|
+
},
|
|
708
|
+
{
|
|
709
|
+
"name": "--lz-track-weak",
|
|
710
|
+
"default": "rgba(255,255,255,0.08)",
|
|
711
|
+
"purpose": "Inner ring border"
|
|
712
|
+
},
|
|
713
|
+
{
|
|
714
|
+
"name": "--lz-color-weak",
|
|
715
|
+
"default": "80% tint",
|
|
716
|
+
"purpose": "Center dot color"
|
|
717
|
+
},
|
|
718
|
+
{
|
|
719
|
+
"name": "--lz-color-sweep",
|
|
720
|
+
"default": "8% tint",
|
|
721
|
+
"purpose": "Beam tail color"
|
|
722
|
+
}
|
|
306
723
|
],
|
|
307
724
|
"keyframeVars": [],
|
|
308
725
|
"examples": {
|
|
@@ -317,16 +734,46 @@
|
|
|
317
734
|
"category": "Spinners",
|
|
318
735
|
"role": "status",
|
|
319
736
|
"description": "Three dots gliding around an invisible circle.",
|
|
320
|
-
"useCases": [
|
|
321
|
-
|
|
737
|
+
"useCases": [
|
|
738
|
+
"light floaty waits"
|
|
739
|
+
],
|
|
740
|
+
"defaults": {
|
|
741
|
+
"size": 44,
|
|
742
|
+
"color": "#f5f5f7",
|
|
743
|
+
"speed": 1
|
|
744
|
+
},
|
|
322
745
|
"attributes": [
|
|
323
|
-
{
|
|
324
|
-
|
|
325
|
-
|
|
746
|
+
{
|
|
747
|
+
"name": "size",
|
|
748
|
+
"reactProp": "size",
|
|
749
|
+
"type": "number",
|
|
750
|
+
"unit": "px",
|
|
751
|
+
"default": 44
|
|
752
|
+
},
|
|
753
|
+
{
|
|
754
|
+
"name": "color",
|
|
755
|
+
"reactProp": "color",
|
|
756
|
+
"type": "string",
|
|
757
|
+
"default": "#f5f5f7"
|
|
758
|
+
},
|
|
759
|
+
{
|
|
760
|
+
"name": "speed",
|
|
761
|
+
"reactProp": "speed",
|
|
762
|
+
"type": "number",
|
|
763
|
+
"default": 1
|
|
764
|
+
}
|
|
326
765
|
],
|
|
327
766
|
"cssVars": [
|
|
328
|
-
{
|
|
329
|
-
|
|
767
|
+
{
|
|
768
|
+
"name": "--lz-size",
|
|
769
|
+
"default": "44px",
|
|
770
|
+
"purpose": "Orbit box size"
|
|
771
|
+
},
|
|
772
|
+
{
|
|
773
|
+
"name": "--lz-color-weak",
|
|
774
|
+
"default": "90% tint",
|
|
775
|
+
"purpose": "Dot color"
|
|
776
|
+
}
|
|
330
777
|
],
|
|
331
778
|
"keyframeVars": [],
|
|
332
779
|
"examples": {
|
|
@@ -341,20 +788,62 @@
|
|
|
341
788
|
"category": "Spinners",
|
|
342
789
|
"role": "status",
|
|
343
790
|
"description": "Eight dots around a ring chasing each other with fading opacity.",
|
|
344
|
-
"useCases": [
|
|
345
|
-
|
|
791
|
+
"useCases": [
|
|
792
|
+
"elegant circular waits",
|
|
793
|
+
"brand moments"
|
|
794
|
+
],
|
|
795
|
+
"defaults": {
|
|
796
|
+
"size": 44,
|
|
797
|
+
"dotSize": 7.92,
|
|
798
|
+
"color": "#f5f5f7",
|
|
799
|
+
"speed": 1
|
|
800
|
+
},
|
|
346
801
|
"attributes": [
|
|
347
|
-
{
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
802
|
+
{
|
|
803
|
+
"name": "size",
|
|
804
|
+
"reactProp": "size",
|
|
805
|
+
"type": "number",
|
|
806
|
+
"unit": "px",
|
|
807
|
+
"default": 44
|
|
808
|
+
},
|
|
809
|
+
{
|
|
810
|
+
"name": "dot-size",
|
|
811
|
+
"reactProp": "dotSize",
|
|
812
|
+
"type": "number",
|
|
813
|
+
"unit": "px",
|
|
814
|
+
"default": "0.18 x size"
|
|
815
|
+
},
|
|
816
|
+
{
|
|
817
|
+
"name": "color",
|
|
818
|
+
"reactProp": "color",
|
|
819
|
+
"type": "string",
|
|
820
|
+
"default": "#f5f5f7"
|
|
821
|
+
},
|
|
822
|
+
{
|
|
823
|
+
"name": "speed",
|
|
824
|
+
"reactProp": "speed",
|
|
825
|
+
"type": "number",
|
|
826
|
+
"default": 1
|
|
827
|
+
}
|
|
351
828
|
],
|
|
352
829
|
"cssVars": [
|
|
353
|
-
{
|
|
354
|
-
|
|
830
|
+
{
|
|
831
|
+
"name": "--lz-size",
|
|
832
|
+
"default": "44px",
|
|
833
|
+
"purpose": "Ring box size"
|
|
834
|
+
},
|
|
835
|
+
{
|
|
836
|
+
"name": "--lz-dot-size",
|
|
837
|
+
"default": "0.18em",
|
|
838
|
+
"purpose": "Dot size (relative or px)"
|
|
839
|
+
}
|
|
355
840
|
],
|
|
356
841
|
"keyframeVars": [
|
|
357
|
-
{
|
|
842
|
+
{
|
|
843
|
+
"name": "--lz-orbit-fade",
|
|
844
|
+
"default": "0.12",
|
|
845
|
+
"purpose": "Resting dot opacity"
|
|
846
|
+
}
|
|
358
847
|
],
|
|
359
848
|
"examples": {
|
|
360
849
|
"html": "<lz-orbit-ring-dots size=\"56\" dot-size=\"10\"></lz-orbit-ring-dots>",
|
|
@@ -368,21 +857,65 @@
|
|
|
368
857
|
"category": "Shapes",
|
|
369
858
|
"role": "status",
|
|
370
859
|
"description": "Two cartoon eyes that look side to side and blink.",
|
|
371
|
-
"useCases": [
|
|
372
|
-
|
|
860
|
+
"useCases": [
|
|
861
|
+
"fun apps",
|
|
862
|
+
"kids' stuff",
|
|
863
|
+
"watching moments"
|
|
864
|
+
],
|
|
865
|
+
"defaults": {
|
|
866
|
+
"size": 44,
|
|
867
|
+
"color": "#f5f5f7",
|
|
868
|
+
"speed": 1
|
|
869
|
+
},
|
|
373
870
|
"attributes": [
|
|
374
|
-
{
|
|
375
|
-
|
|
376
|
-
|
|
871
|
+
{
|
|
872
|
+
"name": "size",
|
|
873
|
+
"reactProp": "size",
|
|
874
|
+
"type": "number",
|
|
875
|
+
"unit": "px",
|
|
876
|
+
"default": 44
|
|
877
|
+
},
|
|
878
|
+
{
|
|
879
|
+
"name": "color",
|
|
880
|
+
"reactProp": "color",
|
|
881
|
+
"type": "string",
|
|
882
|
+
"default": "#f5f5f7"
|
|
883
|
+
},
|
|
884
|
+
{
|
|
885
|
+
"name": "speed",
|
|
886
|
+
"reactProp": "speed",
|
|
887
|
+
"type": "number",
|
|
888
|
+
"default": 1
|
|
889
|
+
}
|
|
377
890
|
],
|
|
378
891
|
"cssVars": [
|
|
379
|
-
{
|
|
380
|
-
|
|
892
|
+
{
|
|
893
|
+
"name": "--lz-size",
|
|
894
|
+
"default": "44px",
|
|
895
|
+
"purpose": "Eye group size"
|
|
896
|
+
},
|
|
897
|
+
{
|
|
898
|
+
"name": "--lz-pupil",
|
|
899
|
+
"default": "rgba(0,0,0,0.85)",
|
|
900
|
+
"purpose": "Pupil color"
|
|
901
|
+
}
|
|
381
902
|
],
|
|
382
903
|
"keyframeVars": [
|
|
383
|
-
{
|
|
384
|
-
|
|
385
|
-
|
|
904
|
+
{
|
|
905
|
+
"name": "--lz-gaze-from",
|
|
906
|
+
"default": "-3px",
|
|
907
|
+
"purpose": "Pupil start offset"
|
|
908
|
+
},
|
|
909
|
+
{
|
|
910
|
+
"name": "--lz-gaze-to",
|
|
911
|
+
"default": "3px",
|
|
912
|
+
"purpose": "Pupil end offset"
|
|
913
|
+
},
|
|
914
|
+
{
|
|
915
|
+
"name": "--lz-blink",
|
|
916
|
+
"default": "0.08",
|
|
917
|
+
"purpose": "Blink closure scale"
|
|
918
|
+
}
|
|
386
919
|
],
|
|
387
920
|
"examples": {
|
|
388
921
|
"html": "<lz-eyes size=\"56\"></lz-eyes>",
|
|
@@ -396,21 +929,64 @@
|
|
|
396
929
|
"category": "Shapes",
|
|
397
930
|
"role": "status",
|
|
398
931
|
"description": "A glowing square that swells, rounds and spins.",
|
|
399
|
-
"useCases": [
|
|
400
|
-
|
|
932
|
+
"useCases": [
|
|
933
|
+
"modern splash states",
|
|
934
|
+
"brand colors"
|
|
935
|
+
],
|
|
936
|
+
"defaults": {
|
|
937
|
+
"size": 44,
|
|
938
|
+
"accent": "#0a84ff",
|
|
939
|
+
"speed": 1
|
|
940
|
+
},
|
|
401
941
|
"attributes": [
|
|
402
|
-
{
|
|
403
|
-
|
|
404
|
-
|
|
942
|
+
{
|
|
943
|
+
"name": "size",
|
|
944
|
+
"reactProp": "size",
|
|
945
|
+
"type": "number",
|
|
946
|
+
"unit": "px",
|
|
947
|
+
"default": 44
|
|
948
|
+
},
|
|
949
|
+
{
|
|
950
|
+
"name": "accent",
|
|
951
|
+
"reactProp": "accent",
|
|
952
|
+
"type": "string",
|
|
953
|
+
"default": "#0a84ff"
|
|
954
|
+
},
|
|
955
|
+
{
|
|
956
|
+
"name": "speed",
|
|
957
|
+
"reactProp": "speed",
|
|
958
|
+
"type": "number",
|
|
959
|
+
"default": 1
|
|
960
|
+
}
|
|
405
961
|
],
|
|
406
962
|
"cssVars": [
|
|
407
|
-
{
|
|
408
|
-
|
|
409
|
-
|
|
963
|
+
{
|
|
964
|
+
"name": "--lz-size",
|
|
965
|
+
"default": "44px",
|
|
966
|
+
"purpose": "Box size"
|
|
967
|
+
},
|
|
968
|
+
{
|
|
969
|
+
"name": "--lz-accent",
|
|
970
|
+
"default": "#0a84ff",
|
|
971
|
+
"purpose": "Box color"
|
|
972
|
+
},
|
|
973
|
+
{
|
|
974
|
+
"name": "--lz-glow",
|
|
975
|
+
"default": "35% tint shadow",
|
|
976
|
+
"purpose": "Glow shadow"
|
|
977
|
+
}
|
|
410
978
|
],
|
|
411
979
|
"keyframeVars": [
|
|
412
|
-
{
|
|
413
|
-
|
|
980
|
+
{
|
|
981
|
+
"name": "--lz-morph",
|
|
982
|
+
"default": "0.72",
|
|
983
|
+
"purpose": "Smallest scale"
|
|
984
|
+
},
|
|
985
|
+
{
|
|
986
|
+
"name": "--lz-morph-radius",
|
|
987
|
+
"default": "17%",
|
|
988
|
+
"purpose": "Corner roundness at peak"
|
|
989
|
+
}
|
|
414
990
|
],
|
|
415
991
|
"examples": {
|
|
416
992
|
"html": "<lz-morphing-square accent=\"#bf5af2\" size=\"56\"></lz-morphing-square>",
|
|
@@ -424,16 +1000,49 @@
|
|
|
424
1000
|
"category": "Shapes",
|
|
425
1001
|
"role": "status",
|
|
426
1002
|
"description": "A soft circle that gently grows and shrinks.",
|
|
427
|
-
"useCases": [
|
|
428
|
-
|
|
1003
|
+
"useCases": [
|
|
1004
|
+
"subtle alive waits",
|
|
1005
|
+
"background states"
|
|
1006
|
+
],
|
|
1007
|
+
"defaults": {
|
|
1008
|
+
"size": 36,
|
|
1009
|
+
"color": "#f5f5f7",
|
|
1010
|
+
"speed": 1
|
|
1011
|
+
},
|
|
429
1012
|
"attributes": [
|
|
430
|
-
{
|
|
431
|
-
|
|
432
|
-
|
|
1013
|
+
{
|
|
1014
|
+
"name": "size",
|
|
1015
|
+
"reactProp": "size",
|
|
1016
|
+
"type": "number",
|
|
1017
|
+
"unit": "px",
|
|
1018
|
+
"default": 36
|
|
1019
|
+
},
|
|
1020
|
+
{
|
|
1021
|
+
"name": "color",
|
|
1022
|
+
"reactProp": "color",
|
|
1023
|
+
"type": "string",
|
|
1024
|
+
"default": "#f5f5f7"
|
|
1025
|
+
},
|
|
1026
|
+
{
|
|
1027
|
+
"name": "speed",
|
|
1028
|
+
"reactProp": "speed",
|
|
1029
|
+
"type": "number",
|
|
1030
|
+
"default": 1
|
|
1031
|
+
}
|
|
1032
|
+
],
|
|
1033
|
+
"cssVars": [
|
|
1034
|
+
{
|
|
1035
|
+
"name": "--lz-size",
|
|
1036
|
+
"default": "36px",
|
|
1037
|
+
"purpose": "Circle size"
|
|
1038
|
+
}
|
|
433
1039
|
],
|
|
434
|
-
"cssVars": [{ "name": "--lz-size", "default": "36px", "purpose": "Circle size" }],
|
|
435
1040
|
"keyframeVars": [
|
|
436
|
-
{
|
|
1041
|
+
{
|
|
1042
|
+
"name": "--lz-breath",
|
|
1043
|
+
"default": "1.14",
|
|
1044
|
+
"purpose": "Growth scale"
|
|
1045
|
+
}
|
|
437
1046
|
],
|
|
438
1047
|
"examples": {
|
|
439
1048
|
"html": "<lz-breathing-pulse size=\"48\" color=\"#30d158\"></lz-breathing-pulse>",
|
|
@@ -447,22 +1056,77 @@
|
|
|
447
1056
|
"category": "Bars & rings",
|
|
448
1057
|
"role": "status",
|
|
449
1058
|
"description": "Four bars dancing like a music equalizer.",
|
|
450
|
-
"useCases": [
|
|
451
|
-
|
|
1059
|
+
"useCases": [
|
|
1060
|
+
"audio",
|
|
1061
|
+
"music",
|
|
1062
|
+
"waveform"
|
|
1063
|
+
],
|
|
1064
|
+
"defaults": {
|
|
1065
|
+
"size": 22,
|
|
1066
|
+
"barWidth": 3,
|
|
1067
|
+
"gap": 3,
|
|
1068
|
+
"color": "#f5f5f7",
|
|
1069
|
+
"speed": 1
|
|
1070
|
+
},
|
|
452
1071
|
"attributes": [
|
|
453
|
-
{
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
1072
|
+
{
|
|
1073
|
+
"name": "size",
|
|
1074
|
+
"reactProp": "size",
|
|
1075
|
+
"type": "number",
|
|
1076
|
+
"unit": "px",
|
|
1077
|
+
"default": 22,
|
|
1078
|
+
"meaning": "Bar height"
|
|
1079
|
+
},
|
|
1080
|
+
{
|
|
1081
|
+
"name": "bar-width",
|
|
1082
|
+
"reactProp": "barWidth",
|
|
1083
|
+
"type": "number",
|
|
1084
|
+
"unit": "px",
|
|
1085
|
+
"default": 3
|
|
1086
|
+
},
|
|
1087
|
+
{
|
|
1088
|
+
"name": "gap",
|
|
1089
|
+
"reactProp": "gap",
|
|
1090
|
+
"type": "number",
|
|
1091
|
+
"unit": "px",
|
|
1092
|
+
"default": 3
|
|
1093
|
+
},
|
|
1094
|
+
{
|
|
1095
|
+
"name": "color",
|
|
1096
|
+
"reactProp": "color",
|
|
1097
|
+
"type": "string",
|
|
1098
|
+
"default": "#f5f5f7"
|
|
1099
|
+
},
|
|
1100
|
+
{
|
|
1101
|
+
"name": "speed",
|
|
1102
|
+
"reactProp": "speed",
|
|
1103
|
+
"type": "number",
|
|
1104
|
+
"default": 1
|
|
1105
|
+
}
|
|
458
1106
|
],
|
|
459
1107
|
"cssVars": [
|
|
460
|
-
{
|
|
461
|
-
|
|
462
|
-
|
|
1108
|
+
{
|
|
1109
|
+
"name": "--lz-size",
|
|
1110
|
+
"default": "22px",
|
|
1111
|
+
"purpose": "Bar height"
|
|
1112
|
+
},
|
|
1113
|
+
{
|
|
1114
|
+
"name": "--lz-bar-width",
|
|
1115
|
+
"default": "3px",
|
|
1116
|
+
"purpose": "Bar width"
|
|
1117
|
+
},
|
|
1118
|
+
{
|
|
1119
|
+
"name": "--lz-gap",
|
|
1120
|
+
"default": "3px",
|
|
1121
|
+
"purpose": "Gap between bars"
|
|
1122
|
+
}
|
|
463
1123
|
],
|
|
464
1124
|
"keyframeVars": [
|
|
465
|
-
{
|
|
1125
|
+
{
|
|
1126
|
+
"name": "--lz-eq-min",
|
|
1127
|
+
"default": "0.3",
|
|
1128
|
+
"purpose": "Shortest bar scale"
|
|
1129
|
+
}
|
|
466
1130
|
],
|
|
467
1131
|
"examples": {
|
|
468
1132
|
"html": "<lz-equalizer size=\"24\" bar-width=\"4\" gap=\"4\" color=\"#ff375f\"></lz-equalizer>",
|
|
@@ -476,21 +1140,81 @@
|
|
|
476
1140
|
"category": "Bars & rings",
|
|
477
1141
|
"role": "progressbar",
|
|
478
1142
|
"description": "A ring that fills to a driven percentage. Static — set percent.",
|
|
479
|
-
"useCases": [
|
|
480
|
-
|
|
1143
|
+
"useCases": [
|
|
1144
|
+
"uploads",
|
|
1145
|
+
"downloads",
|
|
1146
|
+
"known percent tasks"
|
|
1147
|
+
],
|
|
1148
|
+
"defaults": {
|
|
1149
|
+
"size": 44,
|
|
1150
|
+
"strokeWidth": 4,
|
|
1151
|
+
"percent": 0,
|
|
1152
|
+
"color": "#f5f5f7",
|
|
1153
|
+
"speed": 1
|
|
1154
|
+
},
|
|
481
1155
|
"attributes": [
|
|
482
|
-
{
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
1156
|
+
{
|
|
1157
|
+
"name": "size",
|
|
1158
|
+
"reactProp": "size",
|
|
1159
|
+
"type": "number",
|
|
1160
|
+
"unit": "px",
|
|
1161
|
+
"default": 44
|
|
1162
|
+
},
|
|
1163
|
+
{
|
|
1164
|
+
"name": "stroke-width",
|
|
1165
|
+
"reactProp": "strokeWidth",
|
|
1166
|
+
"type": "number",
|
|
1167
|
+
"unit": "px",
|
|
1168
|
+
"default": 4
|
|
1169
|
+
},
|
|
1170
|
+
{
|
|
1171
|
+
"name": "percent",
|
|
1172
|
+
"reactProp": "percent",
|
|
1173
|
+
"type": "number",
|
|
1174
|
+
"unit": "0-100",
|
|
1175
|
+
"default": 0
|
|
1176
|
+
},
|
|
1177
|
+
{
|
|
1178
|
+
"name": "color",
|
|
1179
|
+
"reactProp": "color",
|
|
1180
|
+
"type": "string",
|
|
1181
|
+
"default": "#f5f5f7",
|
|
1182
|
+
"meaning": "Fill color"
|
|
1183
|
+
},
|
|
1184
|
+
{
|
|
1185
|
+
"name": "track-color",
|
|
1186
|
+
"reactProp": "trackColor",
|
|
1187
|
+
"type": "string",
|
|
1188
|
+
"default": "rgba(255,255,255,0.15)"
|
|
1189
|
+
},
|
|
1190
|
+
{
|
|
1191
|
+
"name": "speed",
|
|
1192
|
+
"reactProp": "speed",
|
|
1193
|
+
"type": "number",
|
|
1194
|
+
"default": 1
|
|
1195
|
+
}
|
|
488
1196
|
],
|
|
489
1197
|
"cssVars": [
|
|
490
|
-
{
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
1198
|
+
{
|
|
1199
|
+
"name": "--lz-size",
|
|
1200
|
+
"default": "44px",
|
|
1201
|
+
"purpose": "Ring box size"
|
|
1202
|
+
},
|
|
1203
|
+
{
|
|
1204
|
+
"name": "--lz-stroke",
|
|
1205
|
+
"default": "4px",
|
|
1206
|
+
"purpose": "Ring thickness"
|
|
1207
|
+
},
|
|
1208
|
+
{
|
|
1209
|
+
"name": "--lz-track",
|
|
1210
|
+
"default": "rgba(255,255,255,0.15)",
|
|
1211
|
+
"purpose": "Track color"
|
|
1212
|
+
},
|
|
1213
|
+
{
|
|
1214
|
+
"name": "--lz-percent",
|
|
1215
|
+
"default": "0",
|
|
1216
|
+
"purpose": "Fill percent number"
|
|
1217
|
+
}
|
|
494
1218
|
],
|
|
495
1219
|
"keyframeVars": [],
|
|
496
1220
|
"a11y": "role=progressbar, aria-valuenow/min/max updated with percent",
|
|
@@ -506,22 +1230,85 @@
|
|
|
506
1230
|
"category": "Bars & rings",
|
|
507
1231
|
"role": "progressbar",
|
|
508
1232
|
"description": "A determinate linear progress bar filling to a driven percentage.",
|
|
509
|
-
"useCases": [
|
|
510
|
-
|
|
1233
|
+
"useCases": [
|
|
1234
|
+
"uploads",
|
|
1235
|
+
"downloads",
|
|
1236
|
+
"known percent tasks"
|
|
1237
|
+
],
|
|
1238
|
+
"defaults": {
|
|
1239
|
+
"width": 160,
|
|
1240
|
+
"height": 6,
|
|
1241
|
+
"percent": 0,
|
|
1242
|
+
"color": "#f5f5f7",
|
|
1243
|
+
"speed": 1
|
|
1244
|
+
},
|
|
511
1245
|
"attributes": [
|
|
512
|
-
{
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
1246
|
+
{
|
|
1247
|
+
"name": "width",
|
|
1248
|
+
"reactProp": "width",
|
|
1249
|
+
"type": "number",
|
|
1250
|
+
"unit": "px",
|
|
1251
|
+
"default": 160
|
|
1252
|
+
},
|
|
1253
|
+
{
|
|
1254
|
+
"name": "height",
|
|
1255
|
+
"reactProp": "height",
|
|
1256
|
+
"type": "number",
|
|
1257
|
+
"unit": "px",
|
|
1258
|
+
"default": 6
|
|
1259
|
+
},
|
|
1260
|
+
{
|
|
1261
|
+
"name": "percent",
|
|
1262
|
+
"reactProp": "percent",
|
|
1263
|
+
"type": "number",
|
|
1264
|
+
"unit": "0-100",
|
|
1265
|
+
"default": 0
|
|
1266
|
+
},
|
|
1267
|
+
{
|
|
1268
|
+
"name": "color",
|
|
1269
|
+
"reactProp": "color",
|
|
1270
|
+
"type": "string",
|
|
1271
|
+
"default": "#f5f5f7"
|
|
1272
|
+
},
|
|
1273
|
+
{
|
|
1274
|
+
"name": "track-color",
|
|
1275
|
+
"reactProp": "trackColor",
|
|
1276
|
+
"type": "string",
|
|
1277
|
+
"default": "rgba(255,255,255,0.15)"
|
|
1278
|
+
},
|
|
1279
|
+
{
|
|
1280
|
+
"name": "speed",
|
|
1281
|
+
"reactProp": "speed",
|
|
1282
|
+
"type": "number",
|
|
1283
|
+
"default": 1
|
|
1284
|
+
}
|
|
518
1285
|
],
|
|
519
1286
|
"cssVars": [
|
|
520
|
-
{
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
1287
|
+
{
|
|
1288
|
+
"name": "--lz-width",
|
|
1289
|
+
"default": "160px",
|
|
1290
|
+
"purpose": "Bar width"
|
|
1291
|
+
},
|
|
1292
|
+
{
|
|
1293
|
+
"name": "--lz-height",
|
|
1294
|
+
"default": "6px",
|
|
1295
|
+
"purpose": "Bar thickness"
|
|
1296
|
+
},
|
|
1297
|
+
{
|
|
1298
|
+
"name": "--lz-color",
|
|
1299
|
+
"default": "#f5f5f7",
|
|
1300
|
+
"purpose": "Fill color"
|
|
1301
|
+
},
|
|
1302
|
+
{
|
|
1303
|
+
"name": "--lz-track",
|
|
1304
|
+
"default": "rgba(255,255,255,0.15)",
|
|
1305
|
+
"purpose": "Track color"
|
|
1306
|
+
},
|
|
1307
|
+
{
|
|
1308
|
+
"name": "--lz-percent",
|
|
1309
|
+
"default": "0",
|
|
1310
|
+
"purpose": "Fill percent number"
|
|
1311
|
+
}
|
|
525
1312
|
],
|
|
526
1313
|
"keyframeVars": [],
|
|
527
1314
|
"a11y": "role=progressbar, aria-valuenow/min/max updated with percent",
|
|
@@ -537,22 +1324,72 @@
|
|
|
537
1324
|
"category": "Bars & rings",
|
|
538
1325
|
"role": "status",
|
|
539
1326
|
"description": "A bar with a slider sliding back and forth (unknown progress).",
|
|
540
|
-
"useCases": [
|
|
541
|
-
|
|
1327
|
+
"useCases": [
|
|
1328
|
+
"long unknown tasks"
|
|
1329
|
+
],
|
|
1330
|
+
"defaults": {
|
|
1331
|
+
"width": 160,
|
|
1332
|
+
"height": 6,
|
|
1333
|
+
"accent": "#0a84ff",
|
|
1334
|
+
"speed": 1
|
|
1335
|
+
},
|
|
542
1336
|
"attributes": [
|
|
543
|
-
{
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
1337
|
+
{
|
|
1338
|
+
"name": "width",
|
|
1339
|
+
"reactProp": "width",
|
|
1340
|
+
"type": "number",
|
|
1341
|
+
"unit": "px",
|
|
1342
|
+
"default": 160
|
|
1343
|
+
},
|
|
1344
|
+
{
|
|
1345
|
+
"name": "height",
|
|
1346
|
+
"reactProp": "height",
|
|
1347
|
+
"type": "number",
|
|
1348
|
+
"unit": "px",
|
|
1349
|
+
"default": 6
|
|
1350
|
+
},
|
|
1351
|
+
{
|
|
1352
|
+
"name": "accent",
|
|
1353
|
+
"reactProp": "accent",
|
|
1354
|
+
"type": "string",
|
|
1355
|
+
"default": "#0a84ff"
|
|
1356
|
+
},
|
|
1357
|
+
{
|
|
1358
|
+
"name": "track-color",
|
|
1359
|
+
"reactProp": "trackColor",
|
|
1360
|
+
"type": "string",
|
|
1361
|
+
"default": "#1c1c1e"
|
|
1362
|
+
},
|
|
1363
|
+
{
|
|
1364
|
+
"name": "speed",
|
|
1365
|
+
"reactProp": "speed",
|
|
1366
|
+
"type": "number",
|
|
1367
|
+
"default": 1
|
|
1368
|
+
}
|
|
548
1369
|
],
|
|
549
1370
|
"cssVars": [
|
|
550
|
-
{
|
|
551
|
-
|
|
1371
|
+
{
|
|
1372
|
+
"name": "--lz-accent",
|
|
1373
|
+
"default": "#0a84ff",
|
|
1374
|
+
"purpose": "Slider color"
|
|
1375
|
+
},
|
|
1376
|
+
{
|
|
1377
|
+
"name": "--lz-surface",
|
|
1378
|
+
"default": "#1c1c1e",
|
|
1379
|
+
"purpose": "Track color"
|
|
1380
|
+
}
|
|
552
1381
|
],
|
|
553
1382
|
"keyframeVars": [
|
|
554
|
-
{
|
|
555
|
-
|
|
1383
|
+
{
|
|
1384
|
+
"name": "--lz-slide-from",
|
|
1385
|
+
"default": "-100%",
|
|
1386
|
+
"purpose": "Slider start"
|
|
1387
|
+
},
|
|
1388
|
+
{
|
|
1389
|
+
"name": "--lz-slide-to",
|
|
1390
|
+
"default": "300%",
|
|
1391
|
+
"purpose": "Slider end"
|
|
1392
|
+
}
|
|
556
1393
|
],
|
|
557
1394
|
"examples": {
|
|
558
1395
|
"html": "<lz-indeterminate-progress-bar width=\"220\" height=\"8\" accent=\"#0a84ff\"></lz-indeterminate-progress-bar>",
|
|
@@ -566,22 +1403,70 @@
|
|
|
566
1403
|
"category": "Skeletons",
|
|
567
1404
|
"role": "status",
|
|
568
1405
|
"description": "A rounded block with a light sweeping across it.",
|
|
569
|
-
"useCases": [
|
|
570
|
-
|
|
1406
|
+
"useCases": [
|
|
1407
|
+
"image/profile/card placeholders"
|
|
1408
|
+
],
|
|
1409
|
+
"defaults": {
|
|
1410
|
+
"width": 120,
|
|
1411
|
+
"height": 28,
|
|
1412
|
+
"speed": 1
|
|
1413
|
+
},
|
|
571
1414
|
"attributes": [
|
|
572
|
-
{
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
1415
|
+
{
|
|
1416
|
+
"name": "width",
|
|
1417
|
+
"reactProp": "width",
|
|
1418
|
+
"type": "number",
|
|
1419
|
+
"unit": "px",
|
|
1420
|
+
"default": 120
|
|
1421
|
+
},
|
|
1422
|
+
{
|
|
1423
|
+
"name": "height",
|
|
1424
|
+
"reactProp": "height",
|
|
1425
|
+
"type": "number",
|
|
1426
|
+
"unit": "px",
|
|
1427
|
+
"default": 28
|
|
1428
|
+
},
|
|
1429
|
+
{
|
|
1430
|
+
"name": "track-color",
|
|
1431
|
+
"reactProp": "trackColor",
|
|
1432
|
+
"type": "string",
|
|
1433
|
+
"default": "#1c1c1e"
|
|
1434
|
+
},
|
|
1435
|
+
{
|
|
1436
|
+
"name": "speed",
|
|
1437
|
+
"reactProp": "speed",
|
|
1438
|
+
"type": "number",
|
|
1439
|
+
"default": 1
|
|
1440
|
+
}
|
|
576
1441
|
],
|
|
577
1442
|
"cssVars": [
|
|
578
|
-
{
|
|
579
|
-
|
|
580
|
-
|
|
1443
|
+
{
|
|
1444
|
+
"name": "--lz-surface",
|
|
1445
|
+
"default": "#1c1c1e",
|
|
1446
|
+
"purpose": "Block background"
|
|
1447
|
+
},
|
|
1448
|
+
{
|
|
1449
|
+
"name": "--lz-sheen",
|
|
1450
|
+
"default": "rgba(255,255,255,0.1)",
|
|
1451
|
+
"purpose": "Sweep light color"
|
|
1452
|
+
},
|
|
1453
|
+
{
|
|
1454
|
+
"name": "--lz-radius",
|
|
1455
|
+
"default": "10px",
|
|
1456
|
+
"purpose": "Corner radius"
|
|
1457
|
+
}
|
|
581
1458
|
],
|
|
582
1459
|
"keyframeVars": [
|
|
583
|
-
{
|
|
584
|
-
|
|
1460
|
+
{
|
|
1461
|
+
"name": "--lz-sheen-from",
|
|
1462
|
+
"default": "-120%",
|
|
1463
|
+
"purpose": "Sheen start"
|
|
1464
|
+
},
|
|
1465
|
+
{
|
|
1466
|
+
"name": "--lz-sheen-to",
|
|
1467
|
+
"default": "220%",
|
|
1468
|
+
"purpose": "Sheen end"
|
|
1469
|
+
}
|
|
585
1470
|
],
|
|
586
1471
|
"examples": {
|
|
587
1472
|
"html": "<lz-skeleton-shimmer width=\"240\" height=\"24\"></lz-skeleton-shimmer>",
|
|
@@ -595,23 +1480,77 @@
|
|
|
595
1480
|
"category": "Skeletons",
|
|
596
1481
|
"role": "status",
|
|
597
1482
|
"description": "A composite card skeleton with an avatar circle and text lines under one shared sheen.",
|
|
598
|
-
"useCases": [
|
|
599
|
-
|
|
1483
|
+
"useCases": [
|
|
1484
|
+
"profile cards",
|
|
1485
|
+
"feed items",
|
|
1486
|
+
"user rows"
|
|
1487
|
+
],
|
|
1488
|
+
"defaults": {
|
|
1489
|
+
"width": 200,
|
|
1490
|
+
"height": 64,
|
|
1491
|
+
"speed": 1
|
|
1492
|
+
},
|
|
600
1493
|
"attributes": [
|
|
601
|
-
{
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
1494
|
+
{
|
|
1495
|
+
"name": "width",
|
|
1496
|
+
"reactProp": "width",
|
|
1497
|
+
"type": "number",
|
|
1498
|
+
"unit": "px",
|
|
1499
|
+
"default": 200
|
|
1500
|
+
},
|
|
1501
|
+
{
|
|
1502
|
+
"name": "height",
|
|
1503
|
+
"reactProp": "height",
|
|
1504
|
+
"type": "number",
|
|
1505
|
+
"unit": "px",
|
|
1506
|
+
"default": 64
|
|
1507
|
+
},
|
|
1508
|
+
{
|
|
1509
|
+
"name": "track-color",
|
|
1510
|
+
"reactProp": "trackColor",
|
|
1511
|
+
"type": "string",
|
|
1512
|
+
"default": "#1c1c1e"
|
|
1513
|
+
},
|
|
1514
|
+
{
|
|
1515
|
+
"name": "speed",
|
|
1516
|
+
"reactProp": "speed",
|
|
1517
|
+
"type": "number",
|
|
1518
|
+
"default": 1
|
|
1519
|
+
}
|
|
605
1520
|
],
|
|
606
1521
|
"cssVars": [
|
|
607
|
-
{
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
1522
|
+
{
|
|
1523
|
+
"name": "--lz-width",
|
|
1524
|
+
"default": "200px",
|
|
1525
|
+
"purpose": "Card width"
|
|
1526
|
+
},
|
|
1527
|
+
{
|
|
1528
|
+
"name": "--lz-height",
|
|
1529
|
+
"default": "64px",
|
|
1530
|
+
"purpose": "Card height"
|
|
1531
|
+
},
|
|
1532
|
+
{
|
|
1533
|
+
"name": "--lz-surface",
|
|
1534
|
+
"default": "#1c1c1e",
|
|
1535
|
+
"purpose": "Block background"
|
|
1536
|
+
},
|
|
1537
|
+
{
|
|
1538
|
+
"name": "--lz-radius",
|
|
1539
|
+
"default": "10px",
|
|
1540
|
+
"purpose": "Corner radius"
|
|
1541
|
+
}
|
|
611
1542
|
],
|
|
612
1543
|
"keyframeVars": [
|
|
613
|
-
{
|
|
614
|
-
|
|
1544
|
+
{
|
|
1545
|
+
"name": "--lz-sheen-from",
|
|
1546
|
+
"default": "-120%",
|
|
1547
|
+
"purpose": "Sheen start"
|
|
1548
|
+
},
|
|
1549
|
+
{
|
|
1550
|
+
"name": "--lz-sheen-to",
|
|
1551
|
+
"default": "220%",
|
|
1552
|
+
"purpose": "Sheen end"
|
|
1553
|
+
}
|
|
615
1554
|
],
|
|
616
1555
|
"examples": {
|
|
617
1556
|
"html": "<lz-skeleton-card width=\"240\" height=\"72\"></lz-skeleton-card>",
|
|
@@ -625,184 +1564,78 @@
|
|
|
625
1564
|
"category": "Skeletons",
|
|
626
1565
|
"role": "status",
|
|
627
1566
|
"description": "Repeated list rows with avatars and text lines under one shared sheen.",
|
|
628
|
-
"useCases": [
|
|
629
|
-
|
|
1567
|
+
"useCases": [
|
|
1568
|
+
"chat lists",
|
|
1569
|
+
"inbox rows",
|
|
1570
|
+
"search results"
|
|
1571
|
+
],
|
|
1572
|
+
"defaults": {
|
|
1573
|
+
"width": 180,
|
|
1574
|
+
"rows": 4,
|
|
1575
|
+
"speed": 1
|
|
1576
|
+
},
|
|
630
1577
|
"attributes": [
|
|
631
|
-
{
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
1578
|
+
{
|
|
1579
|
+
"name": "width",
|
|
1580
|
+
"reactProp": "width",
|
|
1581
|
+
"type": "number",
|
|
1582
|
+
"unit": "px",
|
|
1583
|
+
"default": 180
|
|
1584
|
+
},
|
|
1585
|
+
{
|
|
1586
|
+
"name": "rows",
|
|
1587
|
+
"reactProp": "rows",
|
|
1588
|
+
"type": "number",
|
|
1589
|
+
"unit": "rows",
|
|
1590
|
+
"default": 4
|
|
1591
|
+
},
|
|
1592
|
+
{
|
|
1593
|
+
"name": "track-color",
|
|
1594
|
+
"reactProp": "trackColor",
|
|
1595
|
+
"type": "string",
|
|
1596
|
+
"default": "#1c1c1e"
|
|
1597
|
+
},
|
|
1598
|
+
{
|
|
1599
|
+
"name": "speed",
|
|
1600
|
+
"reactProp": "speed",
|
|
1601
|
+
"type": "number",
|
|
1602
|
+
"default": 1
|
|
1603
|
+
}
|
|
635
1604
|
],
|
|
636
1605
|
"cssVars": [
|
|
637
|
-
{
|
|
638
|
-
|
|
639
|
-
|
|
1606
|
+
{
|
|
1607
|
+
"name": "--lz-width",
|
|
1608
|
+
"default": "180px",
|
|
1609
|
+
"purpose": "List width"
|
|
1610
|
+
},
|
|
1611
|
+
{
|
|
1612
|
+
"name": "--lz-surface",
|
|
1613
|
+
"default": "#1c1c1e",
|
|
1614
|
+
"purpose": "Block background"
|
|
1615
|
+
},
|
|
1616
|
+
{
|
|
1617
|
+
"name": "--lz-radius",
|
|
1618
|
+
"default": "10px",
|
|
1619
|
+
"purpose": "Corner radius"
|
|
1620
|
+
}
|
|
640
1621
|
],
|
|
641
1622
|
"keyframeVars": [
|
|
642
|
-
{
|
|
643
|
-
|
|
1623
|
+
{
|
|
1624
|
+
"name": "--lz-sheen-from",
|
|
1625
|
+
"default": "-120%",
|
|
1626
|
+
"purpose": "Sheen start"
|
|
1627
|
+
},
|
|
1628
|
+
{
|
|
1629
|
+
"name": "--lz-sheen-to",
|
|
1630
|
+
"default": "220%",
|
|
1631
|
+
"purpose": "Sheen end"
|
|
1632
|
+
}
|
|
644
1633
|
],
|
|
645
1634
|
"examples": {
|
|
646
1635
|
"html": "<lz-skeleton-list width=\"220\" rows=\"5\"></lz-skeleton-list>",
|
|
647
1636
|
"react": "<SkeletonList width={220} rows={5} />"
|
|
648
1637
|
}
|
|
649
1638
|
},
|
|
650
|
-
{
|
|
651
|
-
"id": "pulsing-orb",
|
|
652
|
-
"tag": "lz-pulsing-orb",
|
|
653
|
-
"reactComponent": "PulsingOrb",
|
|
654
|
-
"category": "Orbs",
|
|
655
|
-
"role": "status",
|
|
656
|
-
"description": "A glowing gradient orb that breathes in and out.",
|
|
657
|
-
"useCases": ["ambient loads", "hero panels", "app splash"],
|
|
658
|
-
"defaults": { "size": 44, "accent": "#0a84ff", "speed": 1 },
|
|
659
|
-
"attributes": [
|
|
660
|
-
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
661
|
-
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
|
|
662
|
-
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
663
|
-
],
|
|
664
|
-
"cssVars": [
|
|
665
|
-
{ "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
|
|
666
|
-
{ "name": "--lz-accent", "default": "#0a84ff", "purpose": "Orb glow color" }
|
|
667
|
-
],
|
|
668
|
-
"keyframeVars": [
|
|
669
|
-
{ "name": "--lz-orb-scale", "default": "1.16", "purpose": "Peak breathe scale" },
|
|
670
|
-
{ "name": "--lz-orb-fade", "default": "0.88", "purpose": "Peak breathe opacity" }
|
|
671
|
-
],
|
|
672
|
-
"examples": {
|
|
673
|
-
"html": "<lz-pulsing-orb size=\"64\" accent=\"#ff375f\"></lz-pulsing-orb>",
|
|
674
|
-
"react": "<PulsingOrb size={64} accent=\"#ff375f\" />"
|
|
675
|
-
}
|
|
676
|
-
},
|
|
677
|
-
{
|
|
678
|
-
"id": "morphing-orb",
|
|
679
|
-
"tag": "lz-morphing-orb",
|
|
680
|
-
"reactComponent": "MorphingOrb",
|
|
681
|
-
"category": "Orbs",
|
|
682
|
-
"role": "status",
|
|
683
|
-
"description": "A blob that continuously morphs its silhouette between rounded shapes.",
|
|
684
|
-
"useCases": ["creative waits", "brand moments", "game loading"],
|
|
685
|
-
"defaults": { "size": 44, "accent": "#0a84ff", "speed": 1 },
|
|
686
|
-
"attributes": [
|
|
687
|
-
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
688
|
-
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
|
|
689
|
-
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
690
|
-
],
|
|
691
|
-
"cssVars": [
|
|
692
|
-
{ "name": "--lz-size", "default": "44px", "purpose": "Blob box size" },
|
|
693
|
-
{ "name": "--lz-accent", "default": "#0a84ff", "purpose": "Blob color" }
|
|
694
|
-
],
|
|
695
|
-
"keyframeVars": [],
|
|
696
|
-
"examples": {
|
|
697
|
-
"html": "<lz-morphing-orb size=\"64\" accent=\"#30d158\"></lz-morphing-orb>",
|
|
698
|
-
"react": "<MorphingOrb size={64} accent=\"#30d158\" />"
|
|
699
|
-
}
|
|
700
|
-
},
|
|
701
|
-
{
|
|
702
|
-
"id": "siri-orb",
|
|
703
|
-
"tag": "lz-siri-orb",
|
|
704
|
-
"reactComponent": "SiriOrb",
|
|
705
|
-
"category": "Orbs",
|
|
706
|
-
"role": "status",
|
|
707
|
-
"description": "A Siri-style orb with a multicolored conic sheen swirling inside.",
|
|
708
|
-
"useCases": ["voice assistants", "AI thinking", "smart waits"],
|
|
709
|
-
"defaults": { "size": 44, "accent": "#0a84ff", "speed": 1 },
|
|
710
|
-
"attributes": [
|
|
711
|
-
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
712
|
-
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
|
|
713
|
-
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
714
|
-
],
|
|
715
|
-
"cssVars": [
|
|
716
|
-
{ "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
|
|
717
|
-
{ "name": "--lz-accent", "default": "#0a84ff", "purpose": "Sheen hue" }
|
|
718
|
-
],
|
|
719
|
-
"keyframeVars": [],
|
|
720
|
-
"examples": {
|
|
721
|
-
"html": "<lz-siri-orb size=\"72\" accent=\"#64d2ff\"></lz-siri-orb>",
|
|
722
|
-
"react": "<SiriOrb size={72} accent=\"#64d2ff\" />"
|
|
723
|
-
}
|
|
724
|
-
},
|
|
725
|
-
{
|
|
726
|
-
"id": "dot-orb",
|
|
727
|
-
"tag": "lz-dot-orb",
|
|
728
|
-
"reactComponent": "DotOrb",
|
|
729
|
-
"category": "Orbs",
|
|
730
|
-
"role": "status",
|
|
731
|
-
"description": "A ring of shimmering dots arranged into an orb silhouette.",
|
|
732
|
-
"useCases": ["orbit waits", "spatial loading", "gaming screens"],
|
|
733
|
-
"defaults": { "size": 44, "count": 8, "color": "#f5f5f7", "speed": 1 },
|
|
734
|
-
"attributes": [
|
|
735
|
-
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
736
|
-
{ "name": "count", "reactProp": "count", "type": "number", "unit": "dots", "default": 8 },
|
|
737
|
-
{ "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
|
|
738
|
-
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
739
|
-
],
|
|
740
|
-
"cssVars": [
|
|
741
|
-
{ "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
|
|
742
|
-
{ "name": "--lz-color", "default": "#f5f5f7", "purpose": "Dot color" }
|
|
743
|
-
],
|
|
744
|
-
"keyframeVars": [
|
|
745
|
-
{ "name": "--lz-dot-min", "default": "0.7", "purpose": "Resting dot scale" },
|
|
746
|
-
{ "name": "--lz-orb-fade", "default": "0.14", "purpose": "Resting dot opacity" }
|
|
747
|
-
],
|
|
748
|
-
"examples": {
|
|
749
|
-
"html": "<lz-dot-orb count=\"12\" color=\"#ff9f0a\"></lz-dot-orb>",
|
|
750
|
-
"react": "<DotOrb count={12} color=\"#ff9f0a\" />"
|
|
751
|
-
}
|
|
752
|
-
},
|
|
753
|
-
{
|
|
754
|
-
"id": "planet-orb",
|
|
755
|
-
"tag": "lz-planet-orb",
|
|
756
|
-
"reactComponent": "PlanetOrb",
|
|
757
|
-
"category": "Orbs",
|
|
758
|
-
"role": "status",
|
|
759
|
-
"description": "A glowing planet core with small moons orbiting it.",
|
|
760
|
-
"useCases": ["space motifs", "science apps", "sci-fi waits"],
|
|
761
|
-
"defaults": { "size": 44, "accent": "#0a84ff", "color": "#f5f5f7", "count": 2, "speed": 1 },
|
|
762
|
-
"attributes": [
|
|
763
|
-
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
764
|
-
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
|
|
765
|
-
{ "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
|
|
766
|
-
{ "name": "count", "reactProp": "count", "type": "number", "unit": "moons", "default": 2 },
|
|
767
|
-
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
768
|
-
],
|
|
769
|
-
"cssVars": [
|
|
770
|
-
{ "name": "--lz-size", "default": "44px", "purpose": "Orb box size" },
|
|
771
|
-
{ "name": "--lz-accent", "default": "#0a84ff", "purpose": "Planet color" },
|
|
772
|
-
{ "name": "--lz-color", "default": "#f5f5f7", "purpose": "Moon color" }
|
|
773
|
-
],
|
|
774
|
-
"keyframeVars": [],
|
|
775
|
-
"examples": {
|
|
776
|
-
"html": "<lz-planet-orb count=\"3\" accent=\"#bf5af2\" color=\"#64d2ff\"></lz-planet-orb>",
|
|
777
|
-
"react": "<PlanetOrb count={3} accent=\"#bf5af2\" color=\"#64d2ff\" />"
|
|
778
|
-
}
|
|
779
|
-
},
|
|
780
|
-
{
|
|
781
|
-
"id": "aura-orb",
|
|
782
|
-
"tag": "lz-aura-orb",
|
|
783
|
-
"reactComponent": "AuraOrb",
|
|
784
|
-
"category": "Orbs",
|
|
785
|
-
"role": "status",
|
|
786
|
-
"description": "Two tinted orbs counter-rotating in overlapping orbits.",
|
|
787
|
-
"useCases": ["gradient waits", "brand palettes", "hero backgrounds"],
|
|
788
|
-
"defaults": { "size": 44, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
|
|
789
|
-
"attributes": [
|
|
790
|
-
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
791
|
-
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
|
|
792
|
-
{ "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
|
|
793
|
-
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
794
|
-
],
|
|
795
|
-
"cssVars": [
|
|
796
|
-
{ "name": "--lz-size", "default": "44px", "purpose": "Orb box size" },
|
|
797
|
-
{ "name": "--lz-accent", "default": "#0a84ff", "purpose": "Counter orb color" },
|
|
798
|
-
{ "name": "--lz-color", "default": "#f5f5f7", "purpose": "Primary orb color" }
|
|
799
|
-
],
|
|
800
|
-
"keyframeVars": [],
|
|
801
|
-
"examples": {
|
|
802
|
-
"html": "<lz-aura-orb accent=\"#ff375f\" color=\"#64d2ff\"></lz-aura-orb>",
|
|
803
|
-
"react": "<AuraOrb accent=\"#ff375f\" color=\"#64d2ff\" />"
|
|
804
|
-
}
|
|
805
|
-
},
|
|
806
1639
|
{
|
|
807
1640
|
"id": "waveform",
|
|
808
1641
|
"tag": "lz-waveform",
|
|
@@ -810,22 +1643,75 @@
|
|
|
810
1643
|
"category": "Music",
|
|
811
1644
|
"role": "status",
|
|
812
1645
|
"description": "A mirrored audio waveform pulsing around a center line.",
|
|
813
|
-
"useCases": [
|
|
814
|
-
|
|
1646
|
+
"useCases": [
|
|
1647
|
+
"audio apps",
|
|
1648
|
+
"playing states",
|
|
1649
|
+
"podcast waits"
|
|
1650
|
+
],
|
|
1651
|
+
"defaults": {
|
|
1652
|
+
"size": 32,
|
|
1653
|
+
"count": 11,
|
|
1654
|
+
"color": "#f5f5f7",
|
|
1655
|
+
"accent": "#0a84ff",
|
|
1656
|
+
"speed": 1
|
|
1657
|
+
},
|
|
815
1658
|
"attributes": [
|
|
816
|
-
{
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
1659
|
+
{
|
|
1660
|
+
"name": "size",
|
|
1661
|
+
"reactProp": "size",
|
|
1662
|
+
"type": "number",
|
|
1663
|
+
"unit": "px",
|
|
1664
|
+
"default": 32
|
|
1665
|
+
},
|
|
1666
|
+
{
|
|
1667
|
+
"name": "count",
|
|
1668
|
+
"reactProp": "count",
|
|
1669
|
+
"type": "number",
|
|
1670
|
+
"unit": "bars",
|
|
1671
|
+
"default": 11
|
|
1672
|
+
},
|
|
1673
|
+
{
|
|
1674
|
+
"name": "color",
|
|
1675
|
+
"reactProp": "color",
|
|
1676
|
+
"type": "string",
|
|
1677
|
+
"default": "#f5f5f7"
|
|
1678
|
+
},
|
|
1679
|
+
{
|
|
1680
|
+
"name": "accent",
|
|
1681
|
+
"reactProp": "accent",
|
|
1682
|
+
"type": "string",
|
|
1683
|
+
"default": "#0a84ff"
|
|
1684
|
+
},
|
|
1685
|
+
{
|
|
1686
|
+
"name": "speed",
|
|
1687
|
+
"reactProp": "speed",
|
|
1688
|
+
"type": "number",
|
|
1689
|
+
"default": 1
|
|
1690
|
+
}
|
|
821
1691
|
],
|
|
822
1692
|
"cssVars": [
|
|
823
|
-
{
|
|
824
|
-
|
|
825
|
-
|
|
1693
|
+
{
|
|
1694
|
+
"name": "--lz-size",
|
|
1695
|
+
"default": "32px",
|
|
1696
|
+
"purpose": "Wave height"
|
|
1697
|
+
},
|
|
1698
|
+
{
|
|
1699
|
+
"name": "--lz-bar-width",
|
|
1700
|
+
"default": "4px",
|
|
1701
|
+
"purpose": "Bar thickness"
|
|
1702
|
+
},
|
|
1703
|
+
{
|
|
1704
|
+
"name": "--lz-gap",
|
|
1705
|
+
"default": "4px",
|
|
1706
|
+
"purpose": "Bar spacing"
|
|
1707
|
+
}
|
|
826
1708
|
],
|
|
827
1709
|
"keyframeVars": [
|
|
828
|
-
{
|
|
1710
|
+
{
|
|
1711
|
+
"name": "--lz-wf-min",
|
|
1712
|
+
"default": "0.22",
|
|
1713
|
+
"purpose": "Resting bar scale"
|
|
1714
|
+
}
|
|
829
1715
|
],
|
|
830
1716
|
"examples": {
|
|
831
1717
|
"html": "<lz-waveform count=\"15\" accent=\"#bf5af2\"></lz-waveform>",
|
|
@@ -838,19 +1724,61 @@
|
|
|
838
1724
|
"reactComponent": "Vinyl",
|
|
839
1725
|
"category": "Music",
|
|
840
1726
|
"role": "status",
|
|
841
|
-
"description": "A spinning record with a gently bobbing tonearm.",
|
|
842
|
-
"useCases": [
|
|
843
|
-
|
|
1727
|
+
"description": "A spinning record with a light sheen, label, spindle and a gently bobbing tonearm.",
|
|
1728
|
+
"useCases": [
|
|
1729
|
+
"music apps",
|
|
1730
|
+
"retro waits",
|
|
1731
|
+
"album screens"
|
|
1732
|
+
],
|
|
1733
|
+
"defaults": {
|
|
1734
|
+
"size": 48,
|
|
1735
|
+
"accent": "#0a84ff",
|
|
1736
|
+
"color": "#f5f5f7",
|
|
1737
|
+
"speed": 1
|
|
1738
|
+
},
|
|
844
1739
|
"attributes": [
|
|
845
|
-
{
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
1740
|
+
{
|
|
1741
|
+
"name": "size",
|
|
1742
|
+
"reactProp": "size",
|
|
1743
|
+
"type": "number",
|
|
1744
|
+
"unit": "px",
|
|
1745
|
+
"default": 48
|
|
1746
|
+
},
|
|
1747
|
+
{
|
|
1748
|
+
"name": "accent",
|
|
1749
|
+
"reactProp": "accent",
|
|
1750
|
+
"type": "string",
|
|
1751
|
+
"default": "#0a84ff"
|
|
1752
|
+
},
|
|
1753
|
+
{
|
|
1754
|
+
"name": "color",
|
|
1755
|
+
"reactProp": "color",
|
|
1756
|
+
"type": "string",
|
|
1757
|
+
"default": "#f5f5f7"
|
|
1758
|
+
},
|
|
1759
|
+
{
|
|
1760
|
+
"name": "speed",
|
|
1761
|
+
"reactProp": "speed",
|
|
1762
|
+
"type": "number",
|
|
1763
|
+
"default": 1
|
|
1764
|
+
}
|
|
849
1765
|
],
|
|
850
1766
|
"cssVars": [
|
|
851
|
-
{
|
|
852
|
-
|
|
853
|
-
|
|
1767
|
+
{
|
|
1768
|
+
"name": "--lz-size",
|
|
1769
|
+
"default": "48px",
|
|
1770
|
+
"purpose": "Record diameter"
|
|
1771
|
+
},
|
|
1772
|
+
{
|
|
1773
|
+
"name": "--lz-accent",
|
|
1774
|
+
"default": "#0a84ff",
|
|
1775
|
+
"purpose": "Label / stylus color"
|
|
1776
|
+
},
|
|
1777
|
+
{
|
|
1778
|
+
"name": "--lz-color",
|
|
1779
|
+
"default": "#f5f5f7",
|
|
1780
|
+
"purpose": "Tonearm color"
|
|
1781
|
+
}
|
|
854
1782
|
],
|
|
855
1783
|
"keyframeVars": [],
|
|
856
1784
|
"examples": {
|
|
@@ -862,25 +1790,78 @@
|
|
|
862
1790
|
"id": "sonar",
|
|
863
1791
|
"tag": "lz-sonar",
|
|
864
1792
|
"reactComponent": "Sonar",
|
|
865
|
-
"category": "
|
|
1793
|
+
"category": "Spinners",
|
|
866
1794
|
"role": "status",
|
|
867
1795
|
"description": "A pulsing core emitting expanding sonar rings.",
|
|
868
|
-
"useCases": [
|
|
869
|
-
|
|
1796
|
+
"useCases": [
|
|
1797
|
+
"radar pings",
|
|
1798
|
+
"location detection",
|
|
1799
|
+
"motion waits"
|
|
1800
|
+
],
|
|
1801
|
+
"defaults": {
|
|
1802
|
+
"size": 44,
|
|
1803
|
+
"count": 3,
|
|
1804
|
+
"accent": "#0a84ff",
|
|
1805
|
+
"color": "#f5f5f7",
|
|
1806
|
+
"speed": 1
|
|
1807
|
+
},
|
|
870
1808
|
"attributes": [
|
|
871
|
-
{
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
1809
|
+
{
|
|
1810
|
+
"name": "size",
|
|
1811
|
+
"reactProp": "size",
|
|
1812
|
+
"type": "number",
|
|
1813
|
+
"unit": "px",
|
|
1814
|
+
"default": 44
|
|
1815
|
+
},
|
|
1816
|
+
{
|
|
1817
|
+
"name": "count",
|
|
1818
|
+
"reactProp": "count",
|
|
1819
|
+
"type": "number",
|
|
1820
|
+
"unit": "rings",
|
|
1821
|
+
"default": 3
|
|
1822
|
+
},
|
|
1823
|
+
{
|
|
1824
|
+
"name": "accent",
|
|
1825
|
+
"reactProp": "accent",
|
|
1826
|
+
"type": "string",
|
|
1827
|
+
"default": "#0a84ff"
|
|
1828
|
+
},
|
|
1829
|
+
{
|
|
1830
|
+
"name": "color",
|
|
1831
|
+
"reactProp": "color",
|
|
1832
|
+
"type": "string",
|
|
1833
|
+
"default": "#f5f5f7"
|
|
1834
|
+
},
|
|
1835
|
+
{
|
|
1836
|
+
"name": "speed",
|
|
1837
|
+
"reactProp": "speed",
|
|
1838
|
+
"type": "number",
|
|
1839
|
+
"default": 1
|
|
1840
|
+
}
|
|
876
1841
|
],
|
|
877
1842
|
"cssVars": [
|
|
878
|
-
{
|
|
879
|
-
|
|
880
|
-
|
|
1843
|
+
{
|
|
1844
|
+
"name": "--lz-size",
|
|
1845
|
+
"default": "44px",
|
|
1846
|
+
"purpose": "Radar size"
|
|
1847
|
+
},
|
|
1848
|
+
{
|
|
1849
|
+
"name": "--lz-accent",
|
|
1850
|
+
"default": "#0a84ff",
|
|
1851
|
+
"purpose": "Ring color"
|
|
1852
|
+
},
|
|
1853
|
+
{
|
|
1854
|
+
"name": "--lz-color",
|
|
1855
|
+
"default": "#f5f5f7",
|
|
1856
|
+
"purpose": "Core color"
|
|
1857
|
+
}
|
|
881
1858
|
],
|
|
882
1859
|
"keyframeVars": [
|
|
883
|
-
{
|
|
1860
|
+
{
|
|
1861
|
+
"name": "--lz-sonar-fade",
|
|
1862
|
+
"default": "0.9",
|
|
1863
|
+
"purpose": "Ring start opacity"
|
|
1864
|
+
}
|
|
884
1865
|
],
|
|
885
1866
|
"examples": {
|
|
886
1867
|
"html": "<lz-sonar count=\"4\" accent=\"#30d158\"></lz-sonar>",
|
|
@@ -893,21 +1874,64 @@
|
|
|
893
1874
|
"reactComponent": "MusicNote",
|
|
894
1875
|
"category": "Music",
|
|
895
1876
|
"role": "status",
|
|
896
|
-
"description": "
|
|
897
|
-
"useCases": [
|
|
898
|
-
|
|
1877
|
+
"description": "Drawn musical notes with heads, stems and flags bobbing in a sing-song rhythm.",
|
|
1878
|
+
"useCases": [
|
|
1879
|
+
"music players",
|
|
1880
|
+
"karaoke",
|
|
1881
|
+
"playful waits"
|
|
1882
|
+
],
|
|
1883
|
+
"defaults": {
|
|
1884
|
+
"size": 32,
|
|
1885
|
+
"count": 2,
|
|
1886
|
+
"color": "#f5f5f7",
|
|
1887
|
+
"speed": 1
|
|
1888
|
+
},
|
|
899
1889
|
"attributes": [
|
|
900
|
-
{
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
1890
|
+
{
|
|
1891
|
+
"name": "size",
|
|
1892
|
+
"reactProp": "size",
|
|
1893
|
+
"type": "number",
|
|
1894
|
+
"unit": "px",
|
|
1895
|
+
"default": 32
|
|
1896
|
+
},
|
|
1897
|
+
{
|
|
1898
|
+
"name": "count",
|
|
1899
|
+
"reactProp": "count",
|
|
1900
|
+
"type": "number",
|
|
1901
|
+
"unit": "notes",
|
|
1902
|
+
"default": 2
|
|
1903
|
+
},
|
|
1904
|
+
{
|
|
1905
|
+
"name": "color",
|
|
1906
|
+
"reactProp": "color",
|
|
1907
|
+
"type": "string",
|
|
1908
|
+
"default": "#f5f5f7"
|
|
1909
|
+
},
|
|
1910
|
+
{
|
|
1911
|
+
"name": "speed",
|
|
1912
|
+
"reactProp": "speed",
|
|
1913
|
+
"type": "number",
|
|
1914
|
+
"default": 1
|
|
1915
|
+
}
|
|
904
1916
|
],
|
|
905
1917
|
"cssVars": [
|
|
906
|
-
{
|
|
907
|
-
|
|
1918
|
+
{
|
|
1919
|
+
"name": "--lz-size",
|
|
1920
|
+
"default": "32px",
|
|
1921
|
+
"purpose": "Note size"
|
|
1922
|
+
},
|
|
1923
|
+
{
|
|
1924
|
+
"name": "--lz-color",
|
|
1925
|
+
"default": "#f5f5f7",
|
|
1926
|
+
"purpose": "Note color"
|
|
1927
|
+
}
|
|
908
1928
|
],
|
|
909
1929
|
"keyframeVars": [
|
|
910
|
-
{
|
|
1930
|
+
{
|
|
1931
|
+
"name": "--lz-note-bob",
|
|
1932
|
+
"default": "0.35em",
|
|
1933
|
+
"purpose": "Note bob height"
|
|
1934
|
+
}
|
|
911
1935
|
],
|
|
912
1936
|
"examples": {
|
|
913
1937
|
"html": "<lz-music-note count=\"3\" color=\"#bf5af2\"></lz-music-note>",
|
|
@@ -921,20 +1945,72 @@
|
|
|
921
1945
|
"category": "Bars & rings",
|
|
922
1946
|
"role": "img",
|
|
923
1947
|
"description": "Three Apple Watch-style activity rings spinning at different speeds and directions.",
|
|
924
|
-
"useCases": [
|
|
925
|
-
|
|
1948
|
+
"useCases": [
|
|
1949
|
+
"fitness apps",
|
|
1950
|
+
"health dashboards",
|
|
1951
|
+
"workout sync"
|
|
1952
|
+
],
|
|
1953
|
+
"defaults": {
|
|
1954
|
+
"size": 44,
|
|
1955
|
+
"accent": "#fa114f",
|
|
1956
|
+
"color": "#30d158",
|
|
1957
|
+
"colorWeak": "#32d7ff",
|
|
1958
|
+
"speed": 1
|
|
1959
|
+
},
|
|
926
1960
|
"attributes": [
|
|
927
|
-
{
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
1961
|
+
{
|
|
1962
|
+
"name": "size",
|
|
1963
|
+
"reactProp": "size",
|
|
1964
|
+
"type": "number",
|
|
1965
|
+
"unit": "px",
|
|
1966
|
+
"default": 44
|
|
1967
|
+
},
|
|
1968
|
+
{
|
|
1969
|
+
"name": "accent",
|
|
1970
|
+
"reactProp": "accent",
|
|
1971
|
+
"type": "string",
|
|
1972
|
+
"default": "#fa114f"
|
|
1973
|
+
},
|
|
1974
|
+
{
|
|
1975
|
+
"name": "color",
|
|
1976
|
+
"reactProp": "color",
|
|
1977
|
+
"type": "string",
|
|
1978
|
+
"default": "#30d158"
|
|
1979
|
+
},
|
|
1980
|
+
{
|
|
1981
|
+
"name": "color-weak",
|
|
1982
|
+
"reactProp": "colorWeak",
|
|
1983
|
+
"type": "string",
|
|
1984
|
+
"default": "#32d7ff"
|
|
1985
|
+
},
|
|
1986
|
+
{
|
|
1987
|
+
"name": "speed",
|
|
1988
|
+
"reactProp": "speed",
|
|
1989
|
+
"type": "number",
|
|
1990
|
+
"default": 1
|
|
1991
|
+
}
|
|
932
1992
|
],
|
|
933
1993
|
"cssVars": [
|
|
934
|
-
{
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
1994
|
+
{
|
|
1995
|
+
"name": "--lz-size",
|
|
1996
|
+
"default": "44px",
|
|
1997
|
+
"purpose": "Ring box size"
|
|
1998
|
+
},
|
|
1999
|
+
{
|
|
2000
|
+
"name": "--lz-accent",
|
|
2001
|
+
"default": "#fa114f",
|
|
2002
|
+
"purpose": "Outer ring color"
|
|
2003
|
+
},
|
|
2004
|
+
{
|
|
2005
|
+
"name": "--lz-color",
|
|
2006
|
+
"default": "#30d158",
|
|
2007
|
+
"purpose": "Middle ring color"
|
|
2008
|
+
},
|
|
2009
|
+
{
|
|
2010
|
+
"name": "--lz-color-weak",
|
|
2011
|
+
"default": "#32d7ff",
|
|
2012
|
+
"purpose": "Inner ring color"
|
|
2013
|
+
}
|
|
938
2014
|
],
|
|
939
2015
|
"keyframeVars": [],
|
|
940
2016
|
"examples": {
|
|
@@ -943,4 +2019,4 @@
|
|
|
943
2019
|
}
|
|
944
2020
|
}
|
|
945
2021
|
]
|
|
946
|
-
}
|
|
2022
|
+
}
|