效果圖：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 或是 頁面的預覽，直接看效果吧。

其中教程中還有許多不足之處，歡迎指正！

Axure原型制作案列--進度條（基於動態面板）