[原型设计]Axure 8一学就会制作页面加载进度条百分比效果

Axure 8一学就会制作页面加载进度条百分比效果

1、新建文件，取名“进度条百分比效果”。效果图如下

效果图

2、拖入矩形框，取名“进度槽”，300px*20px，背景浅灰色。

3、拖入矩形框，取名“进度条”，1px*20px，背景深灰色。

4、拖入文本标签，取名“进度值”，初始值0%，设置隐藏。

选中进度值，右键选择Set Hidden

5、拖入按钮，取名“开始”。

6、设置start按钮Onclick鼠标单击事件，点击start，将进度值控件设置为Show（用于触发进度值控件自动刷新），设置进度条增长至喝进度槽一样宽度。

其中宽度取进度槽的宽度值。通过点击fx进行公式编辑，将进度槽控件设置为局部变量，以LVAR1.width表示进度槽宽度。

7、设置进度值的OnShow事件，对进度条增长过程不断刷新，并计算每一次刷新时进度条长度与进度槽之比即为进度。

（1）Wait 0ms用于刷新操作。

（2）设置进度值为进度条/进度槽，以百分号表示，取整，通过fx进行编辑。

（3）设置进度值控件隐藏

（4）设置进度值控件显示，再次激发进度值OnShow事件，往复循环。

8、设置OnShow循环条件，双击Case1，设置进度条长度小于进度槽长度的情况下，通过执行OnShow事件循环刷新进度值。

通过fx函数分别取进度条和进度槽的宽度。

大功告成，F5预览查看效果。