# Loading 加载

请扫码查看示例

# 介绍

加载图标，用于等待非即时性任务的完成。

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-loading" src="@/node_modules/mui-minix/src/loading/index"></element>
<m-loading></m-loading>

1
2

# 自定义颜色

通过设置 line-color 属性,可以控制颜色。

<element name="m-loading" src="@/node_modules/mui-minix/src/loading/index"></element>
<div>
  <m-loading class="m-r-10" line-color="#25cf42"></m-loading>
  <m-loading line-color="#6575ff"></m-loading>
</div>

1
2
3
4
5

# 自定义大小

通过设置 spinner-size 属性,可以控制尺寸大小。

<element name="m-loading" src="@/node_modules/mui-minix/src/loading/index"></element>
<m-loading line-color="#ff8225" spinner-size="{{24}}"></m-loading>

1
2

# 显示文本

通过设置 text 属性,可以显示文本。

<element name="m-loading" src="@/node_modules/mui-minix/src/loading/index"></element>
<m-loading line-color="#29c3ff" spinner-size="{{24}}" text="加载中..."></m-loading>

1
2

# 水平显示文本

通过设置 is-vertical 属性,可以水平显示文本。

<element name="m-loading" src="@/node_modules/mui-minix/src/loading/index"></element>
<m-loading line-color="#267aff" spinner-size="{{24}}" text="加载中..." is-vertical="{{false}}"></m-loading>

1
2

# 自定义文本颜色

通过设置 text-color 属性,可以控制文本颜色。

<element name="m-loading" src="@/node_modules/mui-minix/src/loading/index"></element>
<m-loading line-color="#267aff" spinner-size="{{24}}" text="加载中..." text-color="#267aff"></m-loading>

1
2

# Api

# Prop

字段	说明	类型	默认值	是否必须
`is-vertical`	文本与图标对齐方式	`boolean`	`true`	`否`
`size`	图标尺寸，默认单位为 `px`	`number`	`24`	`否`
`loading-color`	图标颜色，可选的值为：`white` `grey`	`string`	`white`	`否`
`line-height`	线条高度,请使用百分比	`string`	`28%`	`否`
`text`	文本	`string`	`-`	`否`
`text-size`	文本字体大小	`number`	`12`	`否`
`text-color`	文本颜色	`string`	`#999999`	`否`
`text-margin`	文本与图标的距离	`number`	`4`	`否`
`loading-color`	loading图标的主题（'black'	'white'）	`string`	`white`