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

演示地址：帶加載效果的百分比進(jìn)度條

實(shí)現(xiàn)效果

1. 點(diǎn)擊“開始演示”按鈕，展示帶百分比的進(jìn)度條效果；2、進(jìn)度條在加載的過程中，按鈕文字為“演示進(jìn)行中”；
2. 進(jìn)度在20%的時(shí)候，停止加載，按鈕文字變?yōu)椤皧^力加載中，請(qǐng)等待！”且按鈕不可點(diǎn)擊，一秒鐘后，繼續(xù)加載，文字變?yōu)椤把菔具M(jìn)行中”；
3. 進(jìn)度在60%的時(shí)候，停止加載，按鈕文字變?yōu)椤熬W(wǎng)絡(luò)較差，請(qǐng)等待！”且按鈕不可點(diǎn)擊，兩秒鐘后，繼續(xù)加載，文字變?yōu)椤把菔具M(jìn)行中”；
4. 進(jìn)度在“演示進(jìn)行中”時(shí)，可以點(diǎn)擊按鈕，按鈕文字變?yōu)椤耙褧和＃c(diǎn)擊繼續(xù)”，再次點(diǎn)擊，恢復(fù)進(jìn)度加載效果；
5. 進(jìn)度在100%的時(shí)候，停止加載，按鈕文字變?yōu)椤袄^續(xù)演示”，點(diǎn)擊按鈕，開始新一輪的加載效果。

原理分析

1. 進(jìn)度條加載效果由固定長度背景+可變長度條組成；
2. 點(diǎn)擊按鈕，觸發(fā)動(dòng)態(tài)面板自動(dòng)循環(huán)改變狀態(tài)；
3. 利用動(dòng)態(tài)面包板狀態(tài)改變事件觸發(fā)進(jìn)度條長度變化；
4. 進(jìn)度條長度的變化引起百分比的變化；
5. 百分比在20%、60%、暫停時(shí)分別給按鈕顯示不同的文字。

元件準(zhǔn)備

1. 循環(huán)動(dòng)態(tài)面板，用于控制進(jìn)度條自動(dòng)加載2、當(dāng)前進(jìn)度動(dòng)態(tài)面板，用于顯示當(dāng)前進(jìn)度；
2. 進(jìn)度條背景，用于當(dāng)前進(jìn)度的對(duì)比；
3. baifenbi矩形，文字顯示當(dāng)前的進(jìn)度百分比；
4. submit矩形，用于觸發(fā)進(jìn)度條的首次加載，及顯示當(dāng)前加載狀態(tài)。

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

實(shí)現(xiàn)步驟

（1）設(shè)置“submit”按鈕單擊事件

通過單擊“submit”控制動(dòng)態(tài)面板的狀態(tài)是否改變，用動(dòng)態(tài)面板的狀態(tài)改變?nèi)タ刂七M(jìn)度條的加載效果單擊“submit”時(shí)，切換是否選中狀態(tài)。

1. 選中時(shí)，執(zhí)行循環(huán)效果，將“submit”文字改為“演示進(jìn)行中”；
2. 取消選中時(shí)，暫停循環(huán)效果，將“submit”文字改為“已暫停，點(diǎn)擊繼續(xù)”。

注意：當(dāng)進(jìn)度條加載為100%時(shí)，單擊“submit”需要將進(jìn)度條長度進(jìn)行初始化。

（2）設(shè)置進(jìn)度條加載效果

面板的狀態(tài)改變時(shí)，設(shè)置進(jìn)度條的尺寸改變事件。

當(dāng)加載為20%時(shí)，暫停1秒鐘，顯示“奮力加載中，請(qǐng)等待”，禁用“submit”點(diǎn)擊事件；加載為60%時(shí)，暫停2.5秒鐘，顯示“網(wǎng)絡(luò)較差，請(qǐng)等待”，禁用“submit”點(diǎn)擊事件；暫停過后，恢復(fù)循環(huán)效果，啟用“submit”點(diǎn)擊事件。

（3）設(shè)置百分比的文字改變

進(jìn)度條的尺寸改變時(shí)，設(shè)置百分比的文字改變

本案例已完成，點(diǎn)擊查看上一篇案例《Axure教程：省市縣三級(jí)聯(lián)動(dòng)選擇（全國省市區(qū)數(shù)據(jù)）》

本文由 @十月大神 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議