效果图：https://s17.aconvert.com/convert/p3r68-cdx67/nmntf-wq722.gif
第一步：页面放入矩形（命名为：bg）元件作为背景条，宽高分别为：280*18, 在样式页签中，填充背景色，并设置圆角半径为10.
第二步：页面中拖入动态面板（命名为：bar）元件作为进度条，宽高分别为：200*5, 在样式页签中，填充背景色为蓝色。
页面中拖入文本元件（命名为：percent），此处显示进度条的百分比。
第三步：双击点击动态面板，在State1状态中，放入矩形原件，宽高分别为：200*5, 放在 bar 的下面，并将填充色设置为不透明。
第四步：在动态页面中，添加事件。
思路：1、在页面加载时，给动态面板”设置尺寸“的长度为1，宽度不变。
2、给动态面版添加”尺寸改变时“的事件，当动态面板的尺寸小于动态面板中矩形的尺寸时，让其等待200毫秒，给动态面板设置尺寸为 当前面板的宽度 + 1到10的随机数，确保进度条不规律的增长。当动态面板的宽度等于或大于矩形尺寸时，给动态面板的尺寸直接设置为 200，确认进度条不会一直加载下去。注意，这里面的条件是 if...else if...
（等待200毫秒，如果不等待一些时间，进度条效果是有问题的，估计可能是软件问题，反应时间太快，导致进度条效果不能按预期循环。）
3、当动态面板尺寸改变时，让文本框中显示进度百分比。算法是：当前动态面版的宽度 / 总宽度 200 * 100， 此时算出来是有小数的，所以最后我们用数学函数对刚才的结果进行向下取整 Math.floor().
如下图：
OK，到此为止，进度条就做好了，小主们通过 F5 或是 页面的预览，直接看效果吧。
其中教程中还有许多不足之处，欢迎指正！
原文：https://www.cnblogs.com/boboju/p/10839905.html
