您正在浏览 Nuxt 2 文档。前往 Nuxt 3 文档, 或了解更多关于 Nuxt 2 长期支持


loading indicator 属性

在页面加载时显示精美的加载指示器!


非服务端渲染(ssr 选项为 false)时,首次页面加载没有来自服务端的内容,因此可以在页面加载时显示一个 spinner 代替空白页面。

此属性可以有三种不同类型:stringfalseobject。如果指定字符串,则转换为对象样式。

默认值:

loadingIndicator: {
  name: 'circle',
  color: '#3B8070',
  background: 'white'
}

内置指示器

这些指示器来自优秀的 SpinKit 项目,可以使用 SpinKit 的演示页面预览 spinner。

  • circle
  • cube-grid
  • fading-circle
  • folding-cube
  • chasing-dots
  • nuxt
  • pulse
  • rectangle-bounce
  • rotating-plane
  • three-bounce
  • wandering-cubes

内置指示器支持 colorbackground 选项。

自定义指示器

如果需要自己的特殊指示器,可以将字符串或 Name 键设置为指示器源代码 HTML 模板的路径,所有选项也会传递给模板。

如果需要基础模板,可以参考源代码

Edit this page on GitHub Updated at Tue, Apr 14, 2026