你当前查看的文档是tmui3.2.0（已不再支持NVUE）

[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

反馈组件

圆环进度条 TmCircleProgress

通用进度条组件。

🌶️ 示例

查看模拟效果－

示例模板

<!--
  - Copyright (c) 2025. tmzdy by @https://tmui.design
  -->

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(10)
</script>

<template>
    <view>
        <tm-sheet>
            <tm-text font-size="32" class=" text-weight-b mb-16 d-block">圆环进度条 TmCircleProgress</tm-text>
            <tm-text color="#999999">
                配置灵活，自由度高。
            </tm-text>
        </tm-sheet>


        <tm-sheet class="flex gap-10">
            <tm-circle-progress :model-value="50" line-width="20" color="primary"></tm-circle-progress>
            <tm-circle-progress :model-value="50" line-width="16" color="warn"></tm-circle-progress>
            <tm-circle-progress :model-value="50" line-width="8" color="error"></tm-circle-progress>
            <tm-circle-progress :model-value="50" label-color="#FF6C6C"
            linear-color="linear-gradient(to right, #DD7BFF 0%, #FF6C6C 100%)"></tm-circle-progress>
        </tm-sheet>

        <tm-sheet>
            <tm-text font-size="32" class=" text-weight-b mb-n8 d-block">改变它的起始角度</tm-text>

            <view class="flex gap-10">
                <tm-circle-progress :model-value="50" :start-angle="-90"></tm-circle-progress>
                <tm-circle-progress :model-value="50" :start-angle="90"></tm-circle-progress>
                <tm-circle-progress :model-value="50" :start-angle="180"></tm-circle-progress>
            </view>
        </tm-sheet>

        <tm-sheet>
            <tm-text font-size="32" class=" text-weight-b n8 d-block">受控及动画演示</tm-text>
            <tm-text color="#999999" class=" mb-n8 ">
                演示标签插槽，状态自定义，渐变，自定颜色等属性。
            </tm-text>
            <view class="flex flex-row gap-10 mt-n8">
                <tm-circle-progress v-model="value"></tm-circle-progress>
                <tm-circle-progress v-model="value" :color="value > 50 ? 'success' : 'primary'"></tm-circle-progress>
                <tm-circle-progress v-model="value" :color="value > 50 ? 'success' : 'warn'">
                    <template v-slot:default="{ value, percentage }">
                        <tm-icon color="success" v-if="percentage > 80" name="checkbox-circle-line"></tm-icon>
                        <tm-icon color="warn" v-else name="close-circle-line"></tm-icon>
                    </template>
                </tm-circle-progress>
                <tm-circle-progress v-model="value" label-color="#4DEF8E"
                    linear-color="linear-gradient(to right, #FFEB3A 0%, #4DEF8E 100%)"></tm-circle-progress>

            </view>
            <view class="flex flex-row gap-10 mt-n8">
                <tm-tag @click="value = 10">10</tm-tag>
                <tm-tag @click="value = 50">50</tm-tag>
                <tm-tag @click="value = 100">100</tm-tag>
            </view>
        </tm-sheet>


    </view>

</template>

<style scoped></style>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
modelValue	number	0	当前进度值
min	number	0	最小值
startAngle	number	0	起始角度，默认是0，正上方顺时针
max	number	100	最大值
color	string	""	进度条颜色
linearColor	string	''	线性渐变颜色
bgColor	string	"info"	背景颜色
darkBgColor	string	""	暗黑模式背景颜色
showLabel	union	true	是否显示进度标签
labelColor	string	"#333"	标签文字颜色
darkLabelColor	string	-	暗黑标签文字颜色
labelUnit	string	'%'	暗黑标签文字颜色
labelFontSize	union	24	标签字体大小
lineWidth	union	10	线宽
size	union	100	圆角环直径大小（宽高相等）
duration	number	500	动画持续时间（毫秒）

🌹 事件

事件名	参数	返回数据	描述
update:modelValue	-	-	等同v-model

🌽 slot插槽

插槽名	数据	描述
default	名称：binding,percentage 类型：-
名称：binding,value 类型：-
标签插槽

🥗 ref方法

方法名	参数	返回值	描述