Three Dots 加载动画不显示的根本原因是 CSS 未正确注入或组件未被识别为自定义元素，需显式引入 JS 脚本注册，纯 CSS 引入无效；颜色、大小、速度须通过 color、size、speed 属性控制；SSR 环境需延迟注册；轻量替代方案可用纯 CSS 实现。
Three Dots 为什么加载动画不显示？
根本原因通常是 CSS 未正确注入或 three-dots 组件没被浏览器识别为自定义元素——它不是原生 HTML 标签，得靠 JS 注册。如果你直接写 <three-dots></three-dots> 却没引入对应脚本，页面就啥也不渲染。
- 必须显式引入 JS 文件（如通过
<script src="https://unpkg.com/three-dots@2.1.0/dist/three-dots.min.js"></script>），CDN 地址别用错版本 - 不能只引入 CSS；这个库的样式是 JS 动态注入的，纯 CSS 引入无效
- 若用构建工具（Vite/Webpack），需确保插件支持自定义元素，或手动调用
defineCustomElements() - 检查控制台是否报错
CustomElementRegistry.define: 'three-dots' has already been defined——重复注册会导致后续实例失效
怎么改颜色、大小和速度？
所有样式都靠 HTML 属性控制，不推荐直接写 CSS 覆盖，因为动画依赖内联 transform 和 opacity 计算。
- 改颜色：传
color属性，值为合法 CSS 颜色，如color="#3b82f6"或color="var(--primary)" - 改大小：用
size（单位是 px，默认 24），比如size="16"；注意它会等比缩放整个动画区域 - 改速度：用
speed（单位是 ms，默认 500），数值越小越快，speed="300"就比默认快 40% - 不要设
font-size或width在标签上——这些会被 JS 忽略，不起作用
React/Vue 里用 Three Dots 为啥报错 “Failed to construct 'CustomElement'”？
这是框架在服务端渲染（SSR）或 hydrate 阶段尝试执行了浏览器专属 API。Three Dots 的自定义元素只能在客户端注册。
- React：用
useEffect延迟到浏览器环境再注册，或用dynamic(import(), { ssr: false })懒加载组件 - Vue（尤其 Nuxt）：把
<three-dots></three-dots>包在<clientonly></clientonly>里，或在onMounted中动态import()并defineCustomElements() - 别在
setup()顶层或getStaticProps里调customElements.define()——那会炸 - 如果用了 Shadow DOM 模式（默认开启），确保父容器没设
overflow: hidden，否则三个点可能被裁掉
替代方案比 Three Dots 更轻量吗？
是的，大多数场景下没必要用它。Three Dots 打包后 JS 约 4.2KB（gzip 后 1.8KB），而一个纯 CSS 实现的三连点动画只需不到 0.5KB。
立即学习“前端免费学习笔记（深入）”；
- 简单加载状态：用
@keyframes+ 三个<span></span>，配合animation-delay错开时机，完全零依赖 - 需要响应式？加个
font-size: clamp(0.75rem, 4vw, 1rem)就行，不用 JS 计算 - Three Dots 的真正价值只在“快速统一设计语言+多主题切换”，但前提是团队真在用它的主题系统，否则就是负优化
- 如果项目已用 Lit 或 Stencil，可以考虑自己封装一个更可控的
loading-dots，去掉冗余生命周期
