[原型设计]Axure 8最简单方式制作页面加载进度条百分比效果

1、新建Axure RP项目，取名“Axure最简单方式制作页面加载进度条百分比效果”

2、先看效果图



Axure 8制作的页面加载进度条百分比效果

3、拖入一个矩形框，背景色设置为浅灰色，大小为300px*20px，作为进度槽。再拖入一个矩形框，背景设置为深灰色，大小为1px*20px，作为进度条。通过逐渐增大进度条来实现进度条在进度槽上的变化，加载完成率百分比则为：进度条宽度/进度槽宽度。分别取名进度值和百分号。设置进度值为隐藏。通过隐藏、显示进度值控件来实现循环刷新进度值。



组件

4、设置OnPageLoad事件，Show 进度值，此动作激发进度值的OnShow事件。



OnPageLoad事件

5、设置进度值OnShow事件。

（1）先Wait 0ms，此设置用于刷新。

（2）设置进度条大小，每次循环进度条宽度增加进度槽宽度的百分之一。

（3）设置进度值，进度值为100*进度条宽度/进度槽宽度，去除小数点，采用math.floor函数。

（4）设置进度值隐藏。







6、为循环执行此刷新数据操作，在进度值Hide状态时添加OnHide事件，显示进度值。



结束，F5预览即可得进度条及进度值百分比效果。