更新记录

0.0.8（2025-10-26）

• fix: 修复鸿蒙不显示问题

0.0.7（2025-06-24）

• fix: 修复uniappx IOS进度问题

0.0.6（2025-05-27）

• fix: 修复uniappx 安卓文本不垂直居中的问题

平台兼容性

uni-app(4.44)

uni-app x(4.61)

lime-progress 进度条组件

一个功能丰富的进度条组件，支持百分比显示、自定义颜色、动画效果等功能。适用于任务进度展示、文件上传进度等多种场景。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 进度条组件文档 - 站点1
• 进度条组件文档 - 站点2
• 进度条组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-progress
2. 导入后可能需要重新编译项目
3. 在页面中使用l-progress组件

代码演示

基础

进度条默认为蓝色，使用 percent 属性来设置当前进度。。

<l-progress :percent="percent"></l-progress>

显示百分比

通过设置 show-info，显示当前数值 。

<l-progress :percent="percent" :show-info="true"></l-progress>

改变进度数值位置

通过设置 info-type，显示当前数值在内部还是外部inner | outer, 默认为 outer。通过设置 info-align，显示当前数值对齐位置是在前方还是后方end | start,默认是end。

<l-progress :percent="percent" info-type="inner" info-align="start" :show-info="true" info-color="white"></l-progress>
<l-progress :percent="percent" info-align="start" :show-info="true"></l-progress>
<l-progress :percent="percent" info-align="end" :show-info="true"></l-progress>

颜色

通过 strokeColor 设置进度条的颜色。通过 trailColor 设置进度条的背景色。

<l-progress :percent="percent" strokeColor="#7232dd"></l-progress>
<l-progress :percent="percent" strokeColor="#7232dd" info-type="inner" info-align="end" :show-info="true" info-color="white" ></l-progress>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-progress/components/l-progress -->
<lime-progress />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

Events 事件

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助