更新记录

0.1.6（2026-08-01） 下载此版本

  • 线形鸿蒙：动画从百分比 width 改为独立色块 transform: scaleX()，修复动态更新时先闪到 100% 再回到正确进度；条内文案使用独立覆盖层，避免随色块缩放

平台兼容性

uni-app x(4.25)

Chrome Safari Android iOS 鸿蒙 微信小程序
√ √ √ - √ √

其他

多语言 暗黑模式 宽屏模式
× √ ×

# nax-progress

进度条。线形 / 圆形统一入口，用 shape 切换。

依赖

  • nax-ui-theme（可选，CSS 变量 --nax-*）

基础用法

<!-- 线形（默认） -->
<nax-progress :percent="60"></nax-progress>

<!-- 圆形 -->
<nax-progress shape="circle" :percent="60"></nax-progress>

<!-- 语义色 -->
<nax-progress type="success" :percent="80"></nax-progress>
<nax-progress type="warning" :percent="40"></nax-progress>
<nax-progress type="error" :percent="20"></nax-progress>

<!-- 自定义信息区（需 useSlot） -->
<nax-progress :percent="50" use-slot>
  <text>一半</text>
</nax-progress>

Props

属性 类型 默认 说明
percent number 0 进度 0–100，越界自动夹取
shape string line line / circle
type string primary default / primary / info / success / warning / error（danger→error）
status string '' success / warning / error；有值时覆盖 type 颜色
size string md sm / md / lg
show-info boolean true 是否显示百分比/文案
text-inside boolean false 线形：文案画在进度条内
use-slot boolean false 使用默认插槽自定义信息区
stroke-width number 0 线形高度 / 圆形描边宽（px）；0 跟随 size
width number 0 圆形直径（px）；0 跟随 size
color string '' 激活色，覆盖 type/status
track-color string '' 轨道色；空则 divider token
pivot-text string '' 自定义文案；空则 {percent}%
custom-class string '' 根节点扩展 class

插槽

名称 说明
default 自定义信息区（需 use-slot；线形外侧/条内，或圆形中心）

说明

  • 主题优先 CSS 变量；color / track-color 仅作局部覆盖。
  • 圆形采用双半环 + transform: rotate，全端公共实现。
  • App 鸿蒙线形进度使用 APP-HARMONY 条件编译，以 transform: scaleX() 驱动动画，避开百分比宽度过渡的满宽闪烁；其它端仍使用 width 过渡。

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。