目录
展示操作或任务的当前进度，比如上传文件，是一个圆形的进度环。
#内部实现
组件内部通过canvas实现，有更好的性能和通用性。
#平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
#基本使用
-
通过
percent设置当前的进度值，该值区间为0-100 -
通过
active-color设置圆环的颜色，也可以直接设置type主题颜色，使用预置值 -
通过默认
<template> <u-circle-progress active-color="#2979ff" :percent="80"> <view class="u-progress-content"> <view class="u-progress-dot"></view> <text class='u-progress-info'>查找中</text> </view> </u-circle-progress> </template> <style lang="scss" scoped> .u-progress-content { display: flex; align-items: center; justify-content: center; } .u-progress-dot { width: 16rpx; height: 16rpx; border-radius: 50%; background-color: #fb9126; } .u-progress-info { font-size: 28rpx; padding-left: 16rpx; letter-spacing: 2rpx } </style>slot传入内容，将会显示在圆环的内部
#设置圆环的动画时间
通过duration设置圆环从0递增到100%(也即一圆周)所需的时间，如需动态修改进度值时会用到，比如用户进行某一个操作之后， 需要把进度值从30%改为80%，这里增加了50%(80% - 30% = 50%)，也即半个圆周，所需时间为duration的一半，因为duration值为一个圆周的时间。
<u-circle-progress type="primary" :percent="30" duration="2000"></u-circle-progress>#API
#Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| percent | 圆环进度百分比值，为数值类型，0-100 | String | Number | - | - |
| inactive-color | 圆环的底色，默认为灰色(该值无法动态变更) | String | #ececec | - |
| active-color | 圆环激活部分的颜色(该值无法动态变更) | String | #19be6b | - |
| width | 整个圆环组件的宽度，高度默认等于宽度值，单位rpx | String | Number | 200 | - |
| border-width | 圆环的边框宽度，单位rpx | String | Number | 14 | - |
| duration | 整个圆环执行一圈的时间，单位ms | String | Number | 1500 | - |
| type | 如设置，active-color值将会失效 |
String | - | success / primary / error / info / warning |
| bg-color | 整个组件背景颜色，默认为白色 | String | #ffffff | - |