更新记录

1.0.0（2026-11-12） 下载此版本

• 项目创建

平台兼容性

uni-app x(4.0)

其他

zh-circular-progress 圆形进度条组件

一个可快速实现页面展现的圆形进度条展现的工具。支持尺寸，轨道颜色，进度条颜色，线宽，缺口，中心文字尺寸颜色，终端样式等定制。

安装方法

1. 在uni-app x插件市场中搜索并导入zh-circular-progress
2. 导入后可能需要重新编译项目

代码演示

基础用法

最简单的展现，直接嵌入使用。默认50px长宽。

<zh-circular-progress :percentage="40" />

自定义用法

自定义尺寸，线宽，缺口角度，颜色等。

<zh-circular-progress
    :percentage="40" //进度
    :size="60"  //尺寸px
    :stroke-width="7"  //线宽px
    :start-degree="220" //缺口开始角度，以12点钟方向定义为开始0度
    :end-degree="140"  //缺口结束角度，以12点钟方向定义为开始0度，可小于开始角度
    :color="isEnd?'#FF0000':'#87ab5a'"  //进度条颜色,可根据进度指定不同展现颜色
    :rail-color="#999999" //轨道颜色
    :font-size="16" //中心文字尺寸
    :font-color  //中心文字颜色
    :line-cap="butt"  //线条端点样式，默认round
>
</zh-circular-progress>

展现案例

<template>
    <!-- #ifdef APP -->
    <scroll-view style="flex:1">
    <!-- #endif -->
    圆形进度条
    <zh-circular-progress :percentage="40" :size="60" :stroke-width="7" color="#65d144" :font-size="15" font-color="#ff0000"/>
    向下开口
    <zh-circular-progress :percentage="40" :size="60"
        :stroke-width="7" :start-degree="220" :end-degree="140" 
        color="#FF0000" />
    半开口
    <zh-circular-progress :percentage="40" :size="60"
        :stroke-width="7" :end-degree="270" rail-color="#ecf0b9"
        color="#ff9447" />
    末端样式（默认）
    <zh-circular-progress :percentage="40" :size="120" :stroke-width="20" color="#FF0000" />
    末端样式（butt）
    <zh-circular-progress :percentage="40" :size="120" :stroke-width="20" color="#FF0000"  line-cap="butt" />
    自定义中心展现
    <view style="flex-direction: row;">
    <zh-circular-progress :percentage="percentage" :size="120"  line-cap="butt" >
        {{"进度:"+percentage+"%"}}
    </zh-circular-progress>
    <zh-circular-progress :percentage="percentage" :size="120" line-cap="butt" >
        <image class="logo" src="/static/logo.webp" mode="aspectFit" style="width:60px;height:60px"></image>
    </zh-circular-progress>
    </view>
    <!-- #ifdef APP -->
    </scroll-view>
    <!-- #endif -->
</template>

<script setup>
    const percentage=ref(90)
</script>

<style>

</style>

API文档

属性