Loading 加载中

组件类型

纯图标

在 Stackblitz 中打开

图标加文字横向

在 Stackblitz 中打开

图标加文字竖向

在 Stackblitz 中打开

纯文字

在 Stackblitz 中打开

组件尺寸

在 Stackblitz 中打开

加载速度

在 Stackblitz 中打开

全屏加载

在 Stackblitz 中打开

挂载到指定元素

在 Stackblitz 中打开

函数方式调用

在 Stackblitz 中打开

Loading Props

名称类型默认值描述必传
attachString / Function''挂载元素,默认挂载到组件本身所在的位置。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:AttachNode通用类型定义N
contentString / Slot / Function-子元素。TS 类型:string \| TNode通用类型定义N
defaultString / Slot / Function-子元素,同 content。TS 类型:string \| TNode通用类型定义N
delayNumber0延迟显示加载效果的时间,用于防止请求速度过快引起的加载闪烁,单位:毫秒N
durationNumber800加载动画执行完成一次的时间,单位:毫秒N
fullscreenBooleanfalse是否显示为全屏加载N
indicatorBoolean / Slot / Functiontrue加载指示符,值为 true 显示默认指示符,值为 false 则不显示,也可以自定义指示符。TS 类型:boolean \| TNode通用类型定义N
inheritColorBooleanfalse是否继承父元素颜色N
layoutStringhorizontal对齐方式。可选项:horizontal/verticalN
loadingBooleantrue是否处于加载状态N
pauseBooleanfalse是否暂停动画N
reverseBoolean-加载动画是否反向N
sizeString'20px'尺寸,示例:20pxN
textString / Slot / Function-加载提示文案。TS 类型:string \| TNode通用类型定义N
themeStringcircular加载组件类型。可选项:circular/spinner/dotsN

LoadingPlugin

同时也支持 this.$loading

参数名称参数类型参数默认值参数描述
optionsFunction-必需。TS 类型:boolean \| TdLoadingProps

插件返回值:LoadingInstance【interface LoadingInstance { hide: () => void }】

CSS Variables

组件提供了下列 CSS 变量,可用于自定义样式。

名称默认值描述
--td-loading-color@brand-color-
--td-loading-text-font-size12px-
--td-loading-text-line-height20px-

何时使用

当打开新页面或操作完成后,等待加载时使用。

与页面布局相关

当展示整个页面、或模块的加载进度时,通常放置在页面、模块的正中间。

组件搭配使用

在信息流页面中,可结合下拉刷新使用,对未展示出来的最新内容进行加载。

推荐/慎用示例

当加载时间较长,尤其是超过10秒的场景中,推荐使用进度条,向用户明确展示当前任务的进展,避免等待时间过长带来焦急的负面体验。

相似组件

组件名何时使用
进度条当有一项系统任务正在进行,需要向用户展示该任务的当前进度时使用。
下拉刷新当需要对页面信息进行整体刷新或加载更多同类信息时使用。