Axure制作：一则带百分比的进度条案例

1、为了说明效果，特意放置了3条进度条，以示不同比例的效果，这里仅以一条进度条做范本，如需其他数量进度条可以按“复制+黏贴”方式实现，无非再修改下颜色即可~

2、“进度条”所需的素材不多：2个矩形和2个文本标签即可~如下图所示：

4、按下图布局方式组合：

6、以“矩形：总量“长度为总长度；设定总量是500；参数可任意设置小于500的任意数字；设定一个全局变量num，记录百分比的数值

7、动作1：设置“矩形：颜色进度条“的长度---设置"文本框：参数"的内容（即数值）为局部变量LVAR1设置"文本框：总量"为局部变量LVAR2所以”矩形：颜色进度条“的长度为：[[LVAR1/500*LVAR2.width]]---

9、---2.百分比格式化：保留2位小数格式化用到的函数：[[num.toFixed(2)]]---

10、---3.设置“文本标签：百分比”为计算所得的数值（[[num.toFixed(2)]]%）---

12、到这里就设置结束了，很是简单……一切设置正确，效果就如下：

13、觉得不错，对你有帮助的话，请投个票，加个赞哦~