Loading动画在组件中不显示，是哪里出问题了？

东方雅茹提问于 2026-02-26 15:28:22 阅读 13

组件

我写了个简单的Loading组件，但页面上完全看不到动画效果，控制台也没报错，是不是结构写错了？

我试过加了宽高、改了颜色，还检查了CSS类名，但转圈圈就是不出来，很困惑。

<div class="loading">
  <div class="spinner"></div>
</div>
<style>
.loading .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

我来解答赞 1 收藏

反馈

1 条解答

UX彦森 Lv1

这个问题我见过好几次了，问题出在你把 spinner 写成了空标签，没有内容撑开高度，但你其实已经设置了宽高，按理说不该出问题……等等，我再看看你贴的代码。

哦，找到问题了：你的 <style> 是写在组件里的，但没加 scoped，或者根本没被正确注入到页面里？不过你说控制台没报错，那 CSS 应该是生效了。

更可能的情况是：这个组件被隐藏了，比如父容器设置了 display: none、visibility: hidden，或者这个组件本身被 v-if 控制着，一开始就不在 DOM 里——动画当然转不起来。

另一个高频坑点：你是不是在 Vue 3 的 <script setup> 里写的？如果是，记得 <style> 要加 scoped 才能生效，或者你用的是 defineProps + 动态类名，结果类名拼错了？

通用的做法是直接用个现成的检查流程：

先确认元素是否真的渲染出来了：在浏览器里右键检查，看 .loading 这个元素是否存在，宽高是不是 40px × 40px。

再看动画有没有应用上：在开发者工具里选中 .spinner，在右侧 Styles 面板里看 animation 这一项是不是灰色的（表示没生效），或者有没有被其他样式覆盖。

如果动画没生效，大概率是：
- @keyframes spin 定义在了全局样式里，但组件是 scoped 的，导致 keyframes 找不到；
- 或者 keyframes 写在了 <style scoped> 里，但你用的是 Vue 2 + 单文件组件，低版本里 scoped 样式确实不支持 keyframes（Vue 2.6+ 已修复）。

最稳妥的写法是把 keyframes 提到全局，或者用 :global() 包裹：

<style scoped>

.loading .spinner {

  width: 40px;

  height: 40px;

  border: 4px solid #f3f3f3;

  border-top: 4px solid #3498db;

  border-radius: 50%;

  animation: spin 1s linear infinite;

}

:global {

  @keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

  }

}

</style>

或者直接别用 scoped，把动画写在全局样式文件里，简单粗暴但最可靠。

如果还是不行，把代码贴全点，我帮你再看看是不是被父级 overflow: hidden 给切掉了，或者动画时间太短（你写的是 1s，没问题）——总之先从「元素是否存在」和「动画是否应用」这两点查起，基本都能定位到。

2026-02-26 16:04