加载 Loading

加载中的过渡状态

使用

API

安装使用

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

用法示例

基本使用

codesanbox

copy

code

import React from 'react';
import { TiLoading } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container">
      <TiLoading />
    </div>
  );
}

基本使用

codesanbox

copy

code

import React from 'react';
import { TiLoading } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container" style={{ flexDirection: 'row' }}>
      <TiLoading color="#ff0000" mode="circular" />
      <TiLoading color="#ff0000" mode="spinner" />
      <TiLoading mode="circular" size={108} />
      <TiLoading mode="spinner" size={108} />
    </div>
  );
}

自定义展示模式

loading 支持 circular 和 spinner 两种模式

codesanbox

copy

code

import React from 'react';
import { TiLoading } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container" style={{ flexDirection: 'row' }}>
      <TiLoading mode="circular" />
      <TiLoading mode="spinner" />
    </div>
  );
}

添加文字

codesanbox

copy

code

import React from 'react';
import { TiLoading } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container" style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
      <TiLoading mode="circular" text="loading...." />
      <TiLoading mode="spinner" text="loading...." />

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

TiLoading API

属性 Properties

名称	类型	必填	默认值	说明	备注
text	string	否	-	loading 文字	-
size	string	否	-	loading 尺寸	-
mode	circular | spinner	否	circular	展示模式	-
direction	string	否	-	文字和加载图标的排列方式	-
color	string	否	theme.color.gray.texticon.400	自定义颜色	-

可扩展样式名 External Class

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

CSS 变量 CSS Variables

变量	默认值	说明	备注
--loading-duration	800ms	动画时长	-
--loading-direction	row	文字和加载图标的排列方式	-
--loading-color	theme.color.gray.texticon.400	主体颜色	-
--loading-width	6px	加载框的宽度	-
--loading-text-color	theme.color.gray.texticon.400	文字颜色	-
--loading-text-padding-v	theme.spacing.vertical.v3	文字垂直方向内间距（垂直模式）	-
	theme.spacing.vertical.v0	文字垂直方向内间距（水平模式）	-
--loading-text-padding-h	theme.spacing.horizontal.h0	文字水平方向内间距（垂直模式）	-
	theme.spacing.horizontal.h2	文字水平方向内间距（水平模式）	-
--loading-wrap-padding-v	6px	-	-
--loading-wrap-padding-h	6px	-	-
--loading-margin	0	-	-
--loading-font-size	theme.fontSize.t6	文字字号	-
--loading-line-height	theme.lineHeight.multiline.t3	文字行高	-
--loading-font-weight	theme.fontWeight.regular	文字字重	-