1、新建Axure RP项目,取名“Axure最简单方式制作页面加载进度条百分比效果”
2、先看效果图
3、拖入一个矩形框,背景色设置为浅灰色,大小为300px*20px,作为进度槽。再拖入一个矩形框,背景设置为深灰色,大小为1px*20px,作为进度条。通过逐渐增大进度条来实现进度条在进度槽上的变化,加载完成率百分比则为:进度条宽度/进度槽宽度。分别取名进度值和百分号。设置进度值为隐藏。通过隐藏、显示进度值控件来实现循环刷新进度值。
4、设置OnPageLoad事件,Show 进度值,此动作激发进度值的OnShow事件。
5、设置进度值OnShow事件。
(1)先Wait 0ms,此设置用于刷新。
(2)设置进度条大小,每次循环进度条宽度增加进度槽宽度的百分之一。
(3)设置进度值,进度值为100*进度条宽度/进度槽宽度,去除小数点,采用math.floor函数。
(4)设置进度值隐藏。
6、为循环执行此刷新数据操作,在进度值Hide状态时添加OnHide事件,显示进度值。
结束,F5预览即可得进度条及进度值百分比效果。