圆型进度条 Circle（研发中）

用来展示当前事件进度。

百分比

通过percent属性设置进度条当前进度，取值0~100，默认为0.

示例代码

<l-circle percent='50'></l-circle>

外圆直径

通过outer-diameter属性设置进度条外圆的直径，默认值100，单位rpx. 进度条的宽窄可以通过设置内外圆直径来控制。

示例代码

<l-circle percent='50' out-diameter='150'></l-circle>

内圆直径

通过inner-diameter属性设置进度条内圆的直径，默认值90，单位rpx.进度条的宽窄可以通过设置内外圆直径来控制。

 <l-circle percent='50' inner-diameter='80'></l-circle>

已选择的进度条颜色

通过active-color属性可以设置已选择的进度条颜色，默认为主题色。（关于主题色设置请阅读入门介绍-主题色更改）

示例代码

<l-circle percent='50' active-color='red'></l-circle>

未选择的进度条颜色

通过background-color属性可以设置未选择的进度条颜色，默认颜色#EBEBEB。

示例代码

<l-circle percent='50' background-color='green'></l-circle>

中间的背景颜色

通过inner-color属性可以设置中间背景颜色，默认颜色#FFFFFF。

示例代码

<l-circle percent='50' inner-color='yellow'></l-circle>

显示数值

通过设置show-info属性为true，可以显示当前百分比数值，默认为false.

<l-circle percent='50' show-info='{{true}}'></l-circle>

文字颜色

通过value-color属性，可以设置文字颜色，默认为黑色。

示例代码

<l-circle percent='50' show-info='{{true}}' value-color='red'></l-circle>

文字大小

通过value-size属性，可以设置文字的字体大小，默认25，单位rpx

<l-circle percent='50' show-info='{{true}}' value-size='30'></l-circle>

自定义背景

通过传入slot=”background”自定义中间背景图案。 注：自定义背景和文字显示不能同时设置。

<l-circle percent='50'>
    <image src="timg.jpeg" slot='background' style="width:90rpx;height:90rpx;border-radius:50%;display:block;" />
</l-circle>

进度条属性（Circle Attributes）

外部样式类（Circle ExternalClasses）

插槽（Circle Slots）