@radishon/lumina 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +19 -3
  2. package/dist/index.js +61 -0
  3. package/dist/index.mjs +61 -0
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <div align="center">
4
4
 
5
- 🌐 **在线演示**: [https://lumina.redishon.com](https://lumina.redishon.com)
5
+ 🌐 **在线演示**: [https://lumina.radishon.com](https://lumina.radishon.com)
6
6
 
7
7
  一个优雅的动画加载指示器 **Web Component**，提供多种预设动画序列，为你的应用增添独特的视觉体验。**适用于所有前端框架**。
8
8
 
@@ -258,7 +258,7 @@ el.speed = 200;
258
258
 
259
259
  ## 可用的序列类型
260
260
 
261
- Lumina 提供了 16 种精心设计的动画序列：
261
+ Lumina 提供了 27 种精心设计的动画序列：
262
262
 
263
263
  | 类型 | 名称 | 描述 | 颜色 |
264
264
  |------|------|------|------|
@@ -277,13 +277,29 @@ Lumina 提供了 16 种精心设计的动画序列：
277
277
  | `compass` | 方向罗盘 | 逻辑风格的指针旋转 | 橙红 `#ff4500` |
278
278
  | `pixel` | 像素方块 | 复古风格的像素方块变化 | 紫色 `#722ed1` |
279
279
  | `clock` | 时钟指针 | 复古风格的时钟动画 | 橙色 `#ffbb96` |
280
+ | `equalizer` | 音频均衡 | 音乐风格的音频波形动画 | 青色 `#00bcd4` |
281
+ | `waveform` | 波形振荡 | 音乐风格的声波可视化 | 橙红 `#ff5722` |
282
+ | `dice` | 骰子滚动 | 游戏风格的随机骰子动画 | 灰色 `#607d8b` |
283
+ | `bounce` | 弹跳球 | 动态几何的球体弹跳 | 珊瑚红 `#ff6b6b` |
284
+ | `radar` | 雷达扫描 | 动态几何的雷达扇形扫描 | 青绿 `#00d4aa` |
285
+ | `dots` | 点阵呼吸 | 数字符号的点阵渐变展开 | 蓝色 `#4d96ff` |
286
+ | `liquid` | 液体晃动 | 液体流体的波浪晃动 | 海蓝 `#118ab2` |
287
+ | `ripple` | 水纹扩散 | 液体流体的同心圆扩散 | 深蓝 `#073b4c` |
288
+ | `bubble` | 气泡浮起 | 液体流体的气泡上升动画 | 浅蓝 `#48cae4` |
289
+ | `gradient` | 渐变条 | 光谱渐变的进度条动画 | 紫罗兰 `#ee82ee` |
290
+ | `spectrum` | 光谱扫描 | 光谱渐变的三段滑动 | 粉红 `#ff69b4` |
280
291
 
281
292
  ### 序列分类
282
293
 
283
294
  - **赛博朋克风格**: `braille`, `cypher`
284
- - **自然风格**: `moon`, `wave`
295
+ - **自然风格**: `moon`, `wave`, `snow`, `flower`, `liquid`, `ripple`, `bubble`
285
296
  - **逻辑风格**: `compass`
286
297
  - **复古风格**: `pixel`, `clock`
298
+ - **音乐风格**: `equalizer`, `waveform`
299
+ - **游戏风格**: `dice`
300
+ - **动态几何**: `bounce`, `radar`
301
+ - **数字符号**: `dots`
302
+ - **光谱渐变**: `gradient`, `spectrum`
287
303
 
288
304
  ## 开发指南
289
305
 
package/dist/index.js CHANGED
@@ -101,6 +101,67 @@ var SEQUENCES = {
101
101
  name: "\u65F6\u949F\u6307\u9488",
102
102
  chars: ["\u{1F550}", "\u{1F551}", "\u{1F552}", "\u{1F553}", "\u{1F554}", "\u{1F555}", "\u{1F556}", "\u{1F557}", "\u{1F558}", "\u{1F559}", "\u{1F55A}", "\u{1F55B}"],
103
103
  color: "#ffbb96"
104
+ },
105
+ // 音乐风格
106
+ equalizer: {
107
+ name: "\u97F3\u9891\u5747\u8861",
108
+ chars: ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588", "\u2587", "\u2586", "\u2585", "\u2584"],
109
+ color: "#00bcd4"
110
+ },
111
+ waveform: {
112
+ name: "\u6CE2\u5F62\u632F\u8361",
113
+ chars: ["\u223F", "\u25E0", "\u25E1", "\u223F", "\u25E0", "\u25E1"],
114
+ color: "#ff5722"
115
+ },
116
+ // 游戏风格
117
+ dice: {
118
+ name: "\u9AB0\u5B50\u6EDA\u52A8",
119
+ chars: ["\u2680", "\u2681", "\u2682", "\u2683", "\u2684", "\u2685", "\u2680", "\u2681"],
120
+ color: "#607d8b"
121
+ },
122
+ // 动态几何
123
+ bounce: {
124
+ name: "\u5F39\u8DF3\u7403",
125
+ chars: ["\u2801", "\u2803", "\u2807", "\u2847", "\u28C7", "\u28E7", "\u28F7", "\u28FF", "\u28F7", "\u28E7", "\u28C7", "\u2847"],
126
+ color: "#ff6b6b"
127
+ },
128
+ radar: {
129
+ name: "\u96F7\u8FBE\u626B\u63CF",
130
+ chars: ["\u25D0", "\u25D1", "\u25D2", "\u25D3", "\u25D0", "\u25D1", "\u25D2", "\u25D3"],
131
+ color: "#00d4aa"
132
+ },
133
+ // 数字符号
134
+ dots: {
135
+ name: "\u70B9\u9635\u547C\u5438",
136
+ chars: ["\xB7", "\u22EF", "\u22EF\u22EF", "\xB7\xB7\xB7\xB7", "\u22EF\u22EF\u22EF", "\xB7\xB7\xB7\xB7\xB7\xB7", "\u22EF\u22EF\u22EF\u22EF", "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7"],
137
+ color: "#4d96ff"
138
+ },
139
+ // 液体流体
140
+ liquid: {
141
+ name: "\u6DB2\u4F53\u6643\u52A8",
142
+ chars: ["\u223D", "\u223E", "\u223F", "\u223D", "\u223E", "\u223F", "\u2240", "\u223D"],
143
+ color: "#118ab2"
144
+ },
145
+ ripple: {
146
+ name: "\u6C34\u7EB9\u6269\u6563",
147
+ chars: ["\u25CB", "\u25CE", "\u25C9", "\u25CF", "\u25CB", "\u25CE", "\u25C9", "\u25CF"],
148
+ color: "#073b4c"
149
+ },
150
+ bubble: {
151
+ name: "\u6C14\u6CE1\u6D6E\u8D77",
152
+ chars: ["\u2218", "\u25CB", "\u25CC", "\u25CD", "\u25CE", "\u25CF", "\u25CB", "\u2218"],
153
+ color: "#48cae4"
154
+ },
155
+ // 光谱渐变
156
+ gradient: {
157
+ name: "\u6E10\u53D8\u6761",
158
+ chars: ["\u258F", "\u258E", "\u258D", "\u258C", "\u258B", "\u258A", "\u2589", "\u2588", "\u2589", "\u258A", "\u258B", "\u258C"],
159
+ color: "#ee82ee"
160
+ },
161
+ spectrum: {
162
+ name: "\u5149\u8C31\u626B\u63CF",
163
+ chars: ["\u2591\u2592\u2593", "\u2592\u2593\u2588", "\u2593\u2588\u2591", "\u2588\u2591\u2592", "\u2591\u2592\u2593", "\u2592\u2593\u2588"],
164
+ color: "#ff69b4"
104
165
  }
105
166
  };
106
167
  var LuminaElement = class extends HTMLElement {
package/dist/index.mjs CHANGED
@@ -74,6 +74,67 @@ var SEQUENCES = {
74
74
  name: "\u65F6\u949F\u6307\u9488",
75
75
  chars: ["\u{1F550}", "\u{1F551}", "\u{1F552}", "\u{1F553}", "\u{1F554}", "\u{1F555}", "\u{1F556}", "\u{1F557}", "\u{1F558}", "\u{1F559}", "\u{1F55A}", "\u{1F55B}"],
76
76
  color: "#ffbb96"
77
+ },
78
+ // 音乐风格
79
+ equalizer: {
80
+ name: "\u97F3\u9891\u5747\u8861",
81
+ chars: ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588", "\u2587", "\u2586", "\u2585", "\u2584"],
82
+ color: "#00bcd4"
83
+ },
84
+ waveform: {
85
+ name: "\u6CE2\u5F62\u632F\u8361",
86
+ chars: ["\u223F", "\u25E0", "\u25E1", "\u223F", "\u25E0", "\u25E1"],
87
+ color: "#ff5722"
88
+ },
89
+ // 游戏风格
90
+ dice: {
91
+ name: "\u9AB0\u5B50\u6EDA\u52A8",
92
+ chars: ["\u2680", "\u2681", "\u2682", "\u2683", "\u2684", "\u2685", "\u2680", "\u2681"],
93
+ color: "#607d8b"
94
+ },
95
+ // 动态几何
96
+ bounce: {
97
+ name: "\u5F39\u8DF3\u7403",
98
+ chars: ["\u2801", "\u2803", "\u2807", "\u2847", "\u28C7", "\u28E7", "\u28F7", "\u28FF", "\u28F7", "\u28E7", "\u28C7", "\u2847"],
99
+ color: "#ff6b6b"
100
+ },
101
+ radar: {
102
+ name: "\u96F7\u8FBE\u626B\u63CF",
103
+ chars: ["\u25D0", "\u25D1", "\u25D2", "\u25D3", "\u25D0", "\u25D1", "\u25D2", "\u25D3"],
104
+ color: "#00d4aa"
105
+ },
106
+ // 数字符号
107
+ dots: {
108
+ name: "\u70B9\u9635\u547C\u5438",
109
+ chars: ["\xB7", "\u22EF", "\u22EF\u22EF", "\xB7\xB7\xB7\xB7", "\u22EF\u22EF\u22EF", "\xB7\xB7\xB7\xB7\xB7\xB7", "\u22EF\u22EF\u22EF\u22EF", "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7"],
110
+ color: "#4d96ff"
111
+ },
112
+ // 液体流体
113
+ liquid: {
114
+ name: "\u6DB2\u4F53\u6643\u52A8",
115
+ chars: ["\u223D", "\u223E", "\u223F", "\u223D", "\u223E", "\u223F", "\u2240", "\u223D"],
116
+ color: "#118ab2"
117
+ },
118
+ ripple: {
119
+ name: "\u6C34\u7EB9\u6269\u6563",
120
+ chars: ["\u25CB", "\u25CE", "\u25C9", "\u25CF", "\u25CB", "\u25CE", "\u25C9", "\u25CF"],
121
+ color: "#073b4c"
122
+ },
123
+ bubble: {
124
+ name: "\u6C14\u6CE1\u6D6E\u8D77",
125
+ chars: ["\u2218", "\u25CB", "\u25CC", "\u25CD", "\u25CE", "\u25CF", "\u25CB", "\u2218"],
126
+ color: "#48cae4"
127
+ },
128
+ // 光谱渐变
129
+ gradient: {
130
+ name: "\u6E10\u53D8\u6761",
131
+ chars: ["\u258F", "\u258E", "\u258D", "\u258C", "\u258B", "\u258A", "\u2589", "\u2588", "\u2589", "\u258A", "\u258B", "\u258C"],
132
+ color: "#ee82ee"
133
+ },
134
+ spectrum: {
135
+ name: "\u5149\u8C31\u626B\u63CF",
136
+ chars: ["\u2591\u2592\u2593", "\u2592\u2593\u2588", "\u2593\u2588\u2591", "\u2588\u2591\u2592", "\u2591\u2592\u2593", "\u2592\u2593\u2588"],
137
+ color: "#ff69b4"
77
138
  }
78
139
  };
79
140
  var LuminaElement = class extends HTMLElement {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@radishon/lumina",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "description": "A beautiful animated loading indicator web component for all frameworks",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",