【免费下载链接】warcraftcn-uiA collection of accessible, retro-inspired UI components drawing from classic real-time strategy aesthetics. Built for modern web/apps. Fully open source – copy, paste, customize.项目地址https://gitcode.com/gh_mirrors/wa/warcraftcn-ui点击查看免费下载warcraftcn-ui 是一个致敬《魔兽争霸》经典即时战略美学的开源 UI 组件库它的加载体验三件套——Skeleton 骨架屏、Spinner 召唤法阵加载圈、Toast 卷轴通知——恰好覆盖了页面从打开到反馈的完整链路内容还没到时用骨架屏占位等待处理时转起法阵结果出来后再用一张自动展开的卷轴把消息递给用户。本文将带你快速了解并上手这三个组件。三件套总览每个组件管一截加载流程三个组件各司其职组合起来就能覆盖绝大多数加载与提示场景组件解决什么典型场景Skeleton 骨架屏内容还没回来页面先占座列表页、卡片页、头像加载占位Spinner 法阵加载圈用户已触发动作正在等待处理按钮提交中、数据同步、卡片处理状态Toast 卷轴通知操作完成需要一条不打断用户的反馈保存成功、提交结果、错误提醒源码实现非常轻三个组件分别只有 skeleton.tsx、spinner.tsx、toast.tsx 一个文件全部视觉细节渐变底色、微光扫过、法阵咒语动画集中在 styles/warcraft.css 中维护。一键安装用 shadcn CLI 拉取三个组件warcraftcn-ui 走的是 shadcn 注册表registry模式组件以 JSON 清单形式发布安装后源码直接落在你的项目里复制、粘贴、随便改没有版本号和依赖地狱。三件套对应的注册表条目分别名为skeleton、spinner、toast使用 shadcn CLI 拉取即可r目录下就是各条目的路由见 route.tspnpm dlx shadcnlatest add https://warcraftcn.com/r/skeleton.json pnpm dlx shadcnlatest add https://warcraftcn.com/r/spinner.json pnpm dlx shadcnlatest add https://warcraftcn.com/r/toast.json 每个条目自带所需的样式与图片资源例如 Spinner 会连同 spinner-path.ts 中的咒语图形数据一起安装装完即用无需手动搬文件。完整的组件清单见仓库根目录的 registry.json。Skeleton 骨架屏给等待中的内容占个位矩形 圆形两种基础形态Skeleton本质是一个带主题样式的div尺寸完全由你传入的 className 决定。默认是圆角矩形适合文本行和内容区块加上variantcircular就变成正圆正好给头像占位import { Skeleton } from /components/ui/warcraftcn/skeleton; // 默认矩形形态 Skeleton classNameh-12 w-full / // 圆形形态头像占位 Skeleton variantcircular classNamesize-12 /组件内部叠了两层视觉元素一层是阵营图标脉冲层一层是shimmer 微光扫过层见 skeleton.tsx配合 CSS 里 2.5s 一次的扫光动画warcraft.css占位期间页面始终活着。五大阵营主题一条 faction 属性的事这是 Skeleton 最有魔兽味道的地方——通过faction属性占位色会随阵营切换并且底色上会浮现该阵营的专属小图标阵营属性值视觉风格兽人factionorc红棕战意色配战斧图标暗夜精灵factionelf青绿自然色配叶片图标人类factionhuman蓝金皇家色配盾牌图标不死族factionundead紫暗死灵色配骷髅图标Skeleton factionorc classNameh-12 w-full /兽人与不死族阵营的加载占位风格对比特写四个主题的渐变底色与内阴影细节定义在 warcraft.css想定制自己的阵营色改这一段 CSS 即可。Spinner 法阵加载圈把等待变成施法自带咒语动画与明暗两套配色Spinner是一个SVG组件图形数据来自 assets/spinner-path.ts画出的就是一个魔兽风格的召唤法阵。它有两层动画核心咒语层做 2.6s 的呼吸律动外层光晕同步闪烁另外还有一个 3.4s 的整体魔能波动见 warcraft.css。更贴心的是深色模式适配.dark下会自动切换到wc-spinner-core-dark/wc-spinner-glow-dark两套独立关键帧法阵在浅色与深色背景上都清晰可见。可访问性细节屏幕阅读器与动画降级虽然是个纯装饰性的施法动画spinner.tsx 依然给了rolestatus和aria-labelLoading屏幕阅读器能正确播报正在加载。同时 warcraft.css 响应系统的prefers-reduced-motion用户开启减少动态效果后所有法阵动画会自动停止并降级为静态图形不会晕动。塞进按钮、徽章和输入框法阵尺寸默认size-10用 Tailwind 的 size 工具类就能缩放到任何位置// 按钮中的加载态 Button disabled classNamew-56 Spinner classNamesize-5 / Summoning... /Button // 徽章中的同步状态 Badge Spinner classNamesize-4 / Syncing /Badge更多用法输入框前缀、卡片处理状态等可参考官方示例页 content/docs/components/spinner.mdx。Toast 卷轴通知一张会自己展开的魔法卷轴展开动画与自动消失普通 toast 是弹个方框warcraftcn-ui 的 Toast 则是一张魔法卷轴触发后左右两个卷轴手柄先就位中间的羊皮纸在 0.8s 内徐徐展开文字带着模糊→清晰的浮现效果见 toast.tsx。默认停留 5 秒后卷轴收回、通知消失全程无需用户操作。import { triggerScrollToast } from /components/ui/warcraftcn/toast; // 一行代码弹出一张卷轴 triggerScrollToast({ message: This is test });五种语义变体 六种屏幕位置variant控制文字与图标的语义配色每种变体还自动带一个小图标成功对勾、错误叉号、警告三角、信息 itriggerScrollToast({ message: Save complete, variant: success, durationMs: 3000, position: bottom-center, });variant 可选default/success/error/warning/infoposition 可选top-left、top-center、top-right、bottom-left、bottom-center、bottom-right默认top-centerdurationMs自定义停留时长默认 5000ms卷轴也能换阵营和 Skeleton 一样卷轴支持faction参数default/orc/elf/human/undead手柄与羊皮纸会切换成对应阵营的贴图——每套阵营的卷轴素材都在 assets/toast/ 目录下。完整的交互示例可运行 example/ToastExample.tsx 查看效果。实战组合把三件套串进一个完整页面三件套最自然的组合方式是接力出场页面打开接口未返回 → 列表区铺满Skeleton列表行用矩形、头像用圆形保持阵营主题一致用户点击刷新 → 按钮进入 disabled 状态并内嵌一个Spinner classNamesize-5 /请求成功 → 按钮恢复同时triggerScrollToast({ message: 同步完成, variant: success })递上一张卷轴。三个组件零强耦合按需取用即可视觉细节想深度定制时warcraft.css 里按组件分块Skeleton / Spinner / Toast 各有独立段落改起来一目了然。更多组件Button、Card、Tabs 等的文档见 content/docs/components/ 目录。赞分享【免费下载链接】warcraftcn-uiA collection of accessible, retro-inspired UI components drawing from classic real-time strategy aesthetics. Built for modern web/apps. Fully open source – copy, paste, customize.项目地址https://gitcode.com/gh_mirrors/wa/warcraftcn-ui点击查看免费下载相关推荐终极Moti骨架屏Skeleton组件完全指南提升用户体验的加载动画终极Moti骨架屏Skeleton组件完全指南提升用户体验的加载动画 Moti是基于Reanimated 3的React Native Web 动画库UI组件移动开发前端OpenTiny/TinyVue加载状态Skeleton骨架屏优化体验OpenTiny/TinyVue加载状态Skeleton骨架屏优化体验 还在为页面加载时的空白闪烁而烦恼吗还在担心用户因为等待时间过长而流失吗一文掌握Op前端UI组件设计系统Element UI骨架屏Skeleton加载动画优化技巧Element UI骨架屏Skeleton加载动画优化技巧 在现代Web应用开发中用户体验是衡量产品质量的关键指标之一。尤其当页面加载数据或渲染复杂组件时前端UI组件上一篇剪映们慌了吗当生成视频不再需要时间线传统剪辑软件会被开源 Agent 逼到墙角吗下一篇Claude Code 开源 51 万行刷屏全网T3 Code 这类「调度台」跟着吃到了流量红利创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考