1、新建Axure RP项目,取名“Axure制作页面加载进度条效果”
拖入一个动态面板Dynamic Panel取名“bar”,设置一个状态“scrollbar”。
动态面板
2、状态“scrollbar”添加两个Rectangle,分别取名为1、2,其中2为灰色背景无边框,1为白色背景无边框,1在2上层。
设置组件
3、在Dynamic Panel“bar”上层添加一个同样大小的Rectangle取名“border”,背景色为透明,边框设置为和Rectangle 1一样的灰色作为边框。
设置组件样式
4、设置Page Interactions的OnPageLoad事件。向右移动状态“scrollbar”中的Rectangle 1。进度条长度一共300px,前100px 3秒跑完,后200px 1秒跑完,也就是先慢后快。
OnPageLoad事件
5、执行效果显示如下图
![[原型设计]Axure制作页面加载进度条效果 [原型设计]Axure制作页面加载进度条效果](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzcvYmQ1Y2IzOGM2MDBhYzhmZTQ1MDExODU3NjNmOWE4ODcuZ2lm.gif?w=700&webp=1)