CircleProgress 圆形进度条

展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。
注意：此组件的percent值只能动态增加，不能动态减少。

内部实现

组件内部通过uni的canvas组件实现，有更好的性能和通用性。

说明

圆形进度条用简单的css也能实现，为何要用复杂的canvas？这跟uView的愿景相关，我们希望后面扩展出仪表盘，其他复杂图表类的组件， 而这些组件的实现，不归css管。

平台差异说明

基本使用

• 通过percent设置当前的进度值，该值区间为0-100
• 通过active-color设置圆环的颜色，也可以直接设置type主题颜色，使用预置值
• 通过默认slot传入内容，将会显示在圆环的内部

<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>

设置圆环的动画时间

通过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