更新记录

1.0.1（2025-03-20） 下载此版本

• 更新使用文档
• 优化部分参数

1.0.0（2025-03-20） 下载此版本

[v1.0.0] - 2025-03-20

发布半圆进度条

• 支持自定义颜色包括渐变色
• 支持rpx单位

平台兼容性

ProgressCircle 圆形进度条组件

基于 Canvas 实现的动态圆形进度条组件，支持渐变色、自定义尺寸及末端圆点样式。

特性

• 🎨 支持线性/径向渐变色进度条
• ⚙️ 自定义进度条宽度、颜色、尺寸
• 🔵 智能端点颜色适配
• 📱 自适应 rpx/px 单位
• 🖥 跨平台兼容（支持 UniApp 环境）

使用方法

<!-- 1. 基础使用 -->
<l-progress-circle :percent="18" bg-color="#D2DBE1" progress-color="#f93d2f" width="134rpx" height="67rpx" />
<!-- 2. 线性渐变 -->
<l-progress-circle
  index="1"
  :strokeWidth="6"
  :percent="28"
  bg-color="#D2DBE1"
  :progress-color="{
      type: 'linear', // 可省略
      colors: [
        { offset: 0, color: '#ee7da2' },
        { offset: 1, color: '#a60525' }
      ]
    }"
  width="180rpx"
/>
<!-- 3. 径向渐变 -->
<l-progress-circle
  index="2"
  :strokeWidth="6"
  :percent="50"
  bg-color="#D2DBE1"
  :progress-color="{
       type: 'radial',
       colors: [
         { offset: 0, color: '#8847ff' },
         { offset: 1, color: '#6f7ca8' }
       ]
     }"
  width="180rpx"
/>
<!-- 4. 自定义内容 -->
<l-progress-circle index="3" :strokeWidth="8" :percent="88" progress-color="#3ba422" width="280rpx">
  <view class="text">
    <view>88/100</view>
    <view>合格数/总数</view>
  </view>
</l-progress-circle>

Props 配置项

progressColor 渐变对象