跳到主要内容

加载 Loading

加载中的过渡状态

安装使用

import { TiLoading } from '@titian-design/mobile-react'

用法示例

基本使用

const App: React.FC = () => {
return <TiLoading />
}

自定义展示模式

loading 支持 circularspinner 两种模式

const App: React.FC = () => {
return (
<>
<TiLoading mode="circular" />
<TiLoading mode="spinner" />
</>
)
}

自定义加载颜色, 尺寸

const App: React.FC = () => {
return (
<>
<TiLoading color="#ff0000" mode="circular" />
<TiLoading color="#ff0000" mode="spinner" />
<TiLoading mode="circular" size={108} />
<TiLoading mode="spinner" size={108} />
</>
)
}

添加文字

const App: React.FC = () => {
return (
<>
<TiLoading mode="circular" text="loading...." />
<TiLoading mode="spinner" text="loading...." />

<TiLoading color="#ff0000" mode="circular" text="loading...." />
<TiLoading color="#ff0000" mode="spinner" text="loading...." />
</>
)
}

TiLoading API

属性 Properties

名称类型必填默认值说明备注
textstring-loading 文字-
sizestring-loading 尺寸-
modecircular | spinnercircular展示模式-
directionstring-文字和加载图标的排列方式-
colorstringvar(--neutral-color-3, #9e9e9e)自定义颜色-

可扩展样式名 External Class

名称说明备注
extClass根节点可扩展的类名-

CSS 变量 CSS Variables

变量默认值说明备注
--loading-duration800ms动画时长-
--loading-directionrow文字和加载图标的排列方式-
--loading-colorvar(--neutral-color-3, #9e9e9e)主体颜色-
--loading-width6px加载框的宽度-
--loading-text-colorvar(--loading-color, var(--neutral-color-3, #9e9e9e))文字颜色-
--loading-text-padding-v0文字垂直方向内间距-
--loading-text-padding-h0文字水平方向内间距-
--loading-wrap-padding-v6px--
--loading-wrap-padding-h6px--
--loading-margin0--