uni-app 的 progress 组件不支持 CSS 动画，因其为原生组件且 Web 端 标签样式受限；跨端一致方案是用 view 嵌套 + width 过渡动画实现。
uni-app 的 progress 组件本身不支持 CSS 动画驱动的“动态填充”效果，直接绑定 percent 值也不会自动产生过渡动画——这是最常见的误解起点。
为什么 progress 绑定 percent 后没有动画
uni-app 的 progress 是原生组件（iOS/Android 分别映射为 UIProgressView 和 ProgressBar），其 percent 属性变更时不会触发 CSS 过渡。Web 端虽渲染为 <progress></progress> 标签，但浏览器对它的样式控制极弱，transition 几乎无效。
- 你改了
v-model:percent="current"，数值变了，但视觉上是“跳变”，不是“滑动” - 试图给
progress加transition: width 0.3s没用——它不是靠 width 实现进度，而是内部绘制 - H5 端可 hack，但小程序端完全不可控，必须换思路
用 view + animation 手写一个可动画的进度条
真正可控、跨端一致的方案是：放弃 progress 组件，用两个 view 嵌套 + uni.createAnimation 或 CSS transform 驱动宽度变化。
- 外层
view设固定宽高和overflow: hidden - 内层
view设背景色、初始width: 0%，通过:style="{ width: current + '%' }"控制长度 - 关键：给内层加
transition: width 0.3s ease-in-out—— 这个在 H5 和小程序（基础库 2.7.1+）都生效 - 示例代码片段：
<view class="progress-bar">
<view class="progress-inner" :style="{ width: current + '%' }"></view>
</view>
<style>
.progress-bar {
height: 6px;
background-color: #e5e5e5;
border-radius: 3px;
overflow: hidden;
}
.progress-inner {
height: 100%;
background-color: #007AFF;
width: 0%;
transition: width 0.3s ease-in-out;
}
</style>
小程序平台下 progress 的实际可用配置项
如果你仍想用原生 progress（比如需要兼容低版本或依赖其无障碍特性），只能接受无动画，但要注意几个易错参数：
-
stroke-width在微信小程序中单位是rpx，但支付宝小程序必须带单位（如"6rpx"），不写会失效 -
activeColor和backgroundColor接受十六进制（"#007AFF"）或英文色名（"blue"），但部分安卓低端机不识别rgb()写法 -
show-info仅 H5 和微信小程序支持，字节系（TikTok/抖音小程序）不支持，设了也不显示 - 真机调试时发现进度条“卡住”，大概率是
percent被设为NaN或负数——务必加校验：Math.max(0, Math.min(100, Number(val)))
动画过程需要手动控制节奏？用 setTimeout 或 requestAnimationFrame 驱动
当你的进度来自异步任务（如文件上传、接口轮询），不要直接把最终值赋给 current，否则还是跳变。得自己做插值。
- 简单场景用
setTimeout分步更新（适合总耗时明确）： const step = 5; let val = 0; const timer = setInterval(() => { val += step; this.current = Math.min(100, val); if (val >= 100) clearInterval(timer); }, 100);- 更平滑可用
requestAnimationFrame，但 uni-app 中需注意：H5 可直接用，小程序需用uni.$nextTick替代部分时机 - 复杂逻辑建议封装成
useProgress组合式函数，返回start(to: number, duration: number)方法
真正麻烦的不是怎么画一条线，而是“动画是否在所有平台看起来一致”——小程序里 transition 的兼容性边界比想象中窄，某些安卓 WebView 对 % 宽度过渡仍有渲染延迟。动手前先在目标机型上跑一遍内层 view 的 width 动画，比什么都靠谱。
