你有没有过这种经历。
项目做到一半，就差一个加载动画。你打开搜索引擎，输入「CSS loader spinner」。
出来的结果——
有的要注册、有的要付费、有的是 2015 年的 jQuery 插件、有的看着特别炫但 npm install 之后发现依赖了 47 个包。
你就想要一个好看的圈圈转一转。怎么就这么难。
这个问题，115000 个前端开发者已经替你解决了。
这是个什么网站
Uiverse.io。
号称目前全球最大的开源 UI 组件库。5400 多个组件，全部 MIT 开源，全部免费。
不是一个公司在维护。是社区里 11 万多个开发者，你一个组件、我一个组件，攒出来的。
按钮、卡片、表单、导航栏、价格表、开关、评分组件——你能想到的 UI 元素，里面全有。
但今天我只聊它最实用的一个分类：Loader 加载动画。
1160 个加载动画，一个比一个好看
就光 Loader 这一个分类，里面有 1160 多个。
不是重复凑数的那种。是实打实的 1160 个，每一个都有人专门设计过。
有经典的转圈圈。有跳动的点。有翻转的方块。有 3D 旋转的球。有进度条。有脉冲光圈。有渐变拖尾。
还有一堆你叫不出名字但看着就是比默认的好看的那种。
纯 CSS 实现的。没有 JavaScript。没有第三方依赖。
每一个动画都经过了性能优化——只用了 transform 和 opacity 做动画，渲染在 GPU 上完成，不会触发重排。
说人话：不会卡。
最让我服的设计：双版本
这是 Uiverse 跟其他组件库最不一样的地方。
你在任何一个组件的页面，都能看到一个代码切换标签。
左边是 CSS 版本。右边是 Tailwind 版本。
点一下，代码变了。
不是自动转换工具转的。不是机翻的那种「CSS 转成丑陋的 Tailwind 类」。是每个版本都有专门的人写过。
你项目用什么，你就复制什么。不用自己改。
我自己用过很多次。CSS 版本的代码干净得像手写的一样。变量名有意义（--loader-color、--loader-speed），你改个颜色、调个速度，一看就懂。
Tailwind 版本也是规规整整的 className 组合，没有奇怪的 hack。
框架支持也做得很细
除了 CSS 和 Tailwind，它还支持直接导出成框架代码。
React、Vue、Svelte、Lit。
选一个 loader → 切换到 React 标签 → 复制 → 贴进项目。直接就是一个组件，props 都帮你定义好了。
不需要自己把 HTML 转成 JSX、不需要手动改成单文件组件、不需要调半天让它跟框架的状态管理接上。
一句话：复制粘贴 —— 跑。
Galaxy：整个仓库都能搬到本地
Uiverse 把整个组件库开源在 GitHub 上，项目名叫 Galaxy。
```
git clone https://github.com/uiverse-io/galaxy.git
```
克隆下来，所有组件都在你本地磁盘上。
这个仓库的结构非常简单。一个组件一个文件，文件夹命名清清楚楚：loaders、buttons、cards、navbars。
你不用联网，离线也能翻这些组件。想改就改，想拆就拆。
MIT 协议。商用项目直接用，不需要署名，不需要付费，没有任何附加条件。
它还考虑到了无障碍
这可能是大部分免费组件库完全忽略的东西。
Uiverse 的 loader 组件里，支持了 prefers-reduced-motion 媒体查询。
什么意思。
有些用户会觉得动画让他们头晕或者不舒服。他们在操作系统的设置里打开了「减少动效」。Uiverse 的 loader 检测到这个设置之后，会自动停用动画。
这不是一个复杂的实现。就一行 CSS：
```
@media (prefers-reduced-motion: reduce) { ... }
```
但大部分组件库根本没写这一行。
UI 组件库做到这个程度，说明做的人真的在意。
2025 年的大更新
Uiverse 2.0 今年刚发。
加了三千多个新组件。顺便做了一个 Figma 插件。
设计师在 Figma 里直接拖组件进来用。样式变量自动匹配你项目的设计系统。
以前是「设计稿画好→开发照着写」。现在是「UIverse 里选的组件→设计师直接拖进 Figma→开发者直接复制代码」。设计师和开发者用的同一个东西。
两端对齐。不用再猜对方看到的是什么。
我是怎么用的
现在我做项目，Loader 这部分基本不动手了。
需要加载动画 →打开 Uiverse → 搜 loader → 翻两页挑一个顺眼的 → 复制代码 → 粘贴。
一分钟不到。
有时候多挑几个，贴在同一个页面对比看，选最合适的那个。
这跟「自己手写 loader」的效率差距有多大？
我手写一个 loader，从思考效果 → 写 CSS → 调动画 → 适配深色模式 → 测试不同屏幕 → 差不多半小时。
现在一分钟。省下的 29 分钟，够我喝杯咖啡顺便把下一个功能的需求理一遍。
最后说一句
前端圈有个挺奇怪的现象。
大家花几百个小时造轮子、封装组件库、搭脚手架。但轮到一个加载动画——就随便丢个默认的转圈圈在那。
其实用户的耐心，就是在这些小地方被消磨掉的。
页面加载的时候，一个好看的动画不是「锦上添花」。它是告诉用户「等一下，马上就好」的信号。
信号如果看起来粗糙，用户会怀疑你整个产品都很粗糙。
Uiverse 给了你 1160 个信号。全是免费的。选一个就好。
