TuniaoUI

# CircleProgress 圆形进度条

用于展示进度信息，是一个圆形进度条。

内部是通过canvas实现的。

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ 兼容中 兼容中 兼容中 兼容中

# 基本使用

  • 通过percent设置当前的进度值，该值区间为0-100。
  • 通过activeColor设置进度条的颜色。
<tn-circle-progress :percent="50" activeColor="#01BEFF"></tn-circle-progress>

# 在进度条内显示当前的进度值

可以通过设置showPercent参数来设置是否在进度条中显示进度。

提示：当前的进度值会显示在圆环的中间，如果将圆环的width太小可能会导致内容显示不完整。

<tn-circle-progress :percent="50" activeColor="#01BEFF" :showPercent="true"></tn-circle-progress>

# 自定义进度条内显示的内容

自定义进度条中显示的内容只需要将要显示的内容填写在tn-circle-progress内部（默认插槽）即可，使用自定义内容后showPercent参数会失效。

<tn-circle-progress :percent="50">
  <view class="tn-color-white">加载中</view>
</tn-circle-progress>

# API

# Props

属性名 说明 类型 默认值 可选值
percent 进度条百分比值，0-100 Number 0 -
width 圆环的宽度，单位rpx Number 200 -
borderWidth 圆环的线宽，单位rpx Number 14 -
activeColor 进度条激活部分的颜色 String #01BEFF -
inactiveColor 进度条非激活部分的颜色 String #F0F0F0 -
showPercent 显示进度条进度值 Boolean false true
duration 圆环执行一圈动画的时间，单位ms Number 1500 -

# Slots

名称 说明
default 存放用户自定义进度条内的内容，会覆盖进度值的显示

# Event

none

← CountDown 倒计时 →