進度條可以起到讓用戶耐心等待的作用，讓用戶了解當前任務完成的時間進度、有效防止用戶的矛盾心理（等了好久還沒有反應，我要不要終止掉重新來一遍？但是之前它好像跑了好久了，也許下一刻就可以完成呢）。作者將通過這篇案列分享，教大家使用Axure制作實現“帶加載效果的百分比進度條”。

演示地址：帶加載效果的百分比進度條

實現效果

1. 點擊“開始演示”按鈕，展示帶百分比的進度條效果；2、進度條在加載的過程中，按鈕文字為“演示進行中”；
2. 進度在20%的時候，停止加載，按鈕文字變為“奮力加載中，請等待！”且按鈕不可點擊，一秒鐘后，繼續加載，文字變為“演示進行中”；
3. 進度在60%的時候，停止加載，按鈕文字變為“網絡較差，請等待！”且按鈕不可點擊，兩秒鐘后，繼續加載，文字變為“演示進行中”；
4. 進度在“演示進行中”時，可以點擊按鈕，按鈕文字變為“已暫停，點擊繼續”，再次點擊，恢復進度加載效果；
5. 進度在100%的時候，停止加載，按鈕文字變為“繼續演示”，點擊按鈕，開始新一輪的加載效果。

原理分析

1. 進度條加載效果由固定長度背景+可變長度條組成；
2. 點擊按鈕，觸發動態面板自動循環改變狀態；
3. 利用動態面包板狀態改變事件觸發進度條長度變化；
4. 進度條長度的變化引起百分比的變化；
5. 百分比在20%、60%、暫停時分別給按鈕顯示不同的文字。

元件準備

1. 循環動態面板，用于控制進度條自動加載2、當前進度動態面板，用于顯示當前進度；
2. 進度條背景，用于當前進度的對比；
3. baifenbi矩形，文字顯示當前的進度百分比；
4. submit矩形，用于觸發進度條的首次加載，及顯示當前加載狀態。

重新布局元件后效果如下：

實現步驟

（1）設置“submit”按鈕單擊事件

通過單擊“submit”控制動態面板的狀態是否改變，用動態面板的狀態改變去控制進度條的加載效果單擊“submit”時，切換是否選中狀態。

1. 選中時，執行循環效果，將“submit”文字改為“演示進行中”；
2. 取消選中時，暫停循環效果，將“submit”文字改為“已暫停，點擊繼續”。

注意：當進度條加載為100%時，單擊“submit”需要將進度條長度進行初始化。

（2）設置進度條加載效果

面板的狀態改變時，設置進度條的尺寸改變事件。

當加載為20%時，暫停1秒鐘，顯示“奮力加載中，請等待”，禁用“submit”點擊事件；加載為60%時，暫停2.5秒鐘，顯示“網絡較差，請等待”，禁用“submit”點擊事件；暫停過后，恢復循環效果，啟用“submit”點擊事件。

（3）設置百分比的文字改變

進度條的尺寸改變時，設置百分比的文字改變

本案例已完成，點擊查看上一篇案例《Axure教程：省市縣三級聯動選擇（全國省市區數據）》

本文由 @十月大神 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議