Categories: Nuxt.js 教程

Nuxt.js loadingIndicator 属性

loadingIndicator 属性

在SPA页面加载时显示不同加载进度条!

在SPA模式下运行Nuxt.js时,第一页加载时没有来自服务器端的内容。因此,我们可能会显示一个加载进度,而不是在页面加载时显示空白页面。 此属性可以有3种不同的类型:string或false或object。如果提供了string值,则将其转换为object样式。

默认值为:

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

内置加载器样式

这些指标来自令人敬佩的Spinkit项目。您可以使用其demo页面预览加载进度样式。

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

内置加载器样式支持 color 和 background 配置.

自定义加载器

如果您需要自己的特殊加载器,String值或Name键也可以是指标源代码的html模板的路径!所有选项也都传递给模板。

如果您需要基础配置,Nuxt的内置源代码也可用!

冒牌SEO

前端开发者,欢迎大家一起沟通和交流。

Share
Published by
冒牌SEO

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

3 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

1 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

2 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

3 周 ago