起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure 8.0實例｜簡單實用的進度條
加載時，一個簡單的進度條或許能讓網站增彩很多。
這個進度條的特點是：無論大小如何縮放，都不會影響進度條的質量(話說的有些絕對了，個人覺得絕大部分情況下不會出現問題)，預覽一下效果吧。圖片有些失真，將就一下。
一、元件準備
1、矩形框一個。作為背景用，命名“背景”；
2、動態面板一個。作為進度條，命名“進度條”。里面放置一個矩形框，性狀大小與“背景”矩形框保持一致，顏色不一致即可；
3、水滴標記一個。作為進度百分比；
二、添加用例
1、本文的進度條相當的簡單，只有“進度條”動態面板有用例；
1)“進度條”載入時，設置進入條的寬度(長度)為“背景”矩形框寬度(長度)的百分之一；
2)在“進度條”面板尺寸改變時，去判斷“進度條”的寬度(長度)是否小于“背景”的寬度(長度)。①如果小于，則先等待一段時間(不然的話看不到進度條的效果)；②設置“進度條”的寬度(長度)為當前進度條的寬度(長度)+“背景”的寬度(長度)的百分之一；③移動“百分比”水滴標記的位置，是“百分比”水滴標記的中間位置在“進度條”的右側；④設置百分比到“百分比”水滴標記文本；
①等待一段時間時間(時間長短可自行設計)；
②設置“進度條”的寬度(長度)；
③移動“百分比”水滴標記；
X：
Y：
④設置百分比到“百分比”水滴標記；
三、預覽
至此，簡單的進度條原型已經完成了，F5一下吧~
PS：只要保證“背景”的起始位置和“進度條”面板的其實位置一樣，且“背景”的寬度(長度)和形狀與“進度條”動態面板里面的矩形框的寬度(長度)和形狀一致，基本上可以保障進度條的縮放不會影響到到進度條的功能，有興趣的朋友不妨一試。
本文由 @無淚 原創發布于人人都是產品經理。未經許可，禁止轉載。
公眾號：Axure原型設計
評論
為什么動不了啊
我照著做下來，水滴不會移動
?? 新手雖然每一步照著做，最后效果也有了。但是對于每個步驟都不是很理解。。。每個步驟的函數就只是設置寬度之類的，怎么就能成為動效了呢？ ? ?
不知道為什么 我照著弄進度條會到101%才停下
最后需要判斷一下，如果超過了100%，就設置成100%
啊啊啊啊啊，我知道原因了！添加局部變量的時候，不能用中文?。?！
怎么辦，不知道哪里出問題了，好急呀 ?? ?? ??
有問題，可以留下你的QQ嗎？
贊！學會了，不知道Math.floor這個參數是啥意思？可以進一步實現非勻速的進度條，先慢后快，更像真實的。
Math.floor()是數學函數，向下取整，與Math.ceil()函數相反，Math.ceil()是向上取整
如果想要實現非勻速其實只需要稍微改動一下就可以，將設置“進度條”的寬度改為使用Math.random()函數獲取一個隨機數，這樣一來每一次增加的寬度都可能不相同，實現了非勻速的加載過程[[LVAR2.width+Math.floor(Math.random()*10)]]，不過Math.random()獲取的是隨機數，在最后一次獲取的數據不一定正好使進度條達到100%，如果進度條超過了100%，那么需要將“百分比”的內容改為100%。所以還需要增加一個用例將“百分比”設置成100%，評論里面沒辦法加入截圖，如果有需要可以直接留言，我們一起探討~
如果想要實現非勻速其實只需要稍微改動一下就可以，將設置“進度條”的寬度改為使用Math.random()函數獲取一個隨機數，這樣一來每一次增加的寬度都可能不相同，實現了非勻速的加載過程[[LVAR2.width+Math.floor(Math.random()*10)]]，不過Math.random()獲取的是隨機數，在最后一次獲取的數據不一定正好使進度條達到100%，如果進度條超過了100%，那么需要將“百分比”的內容改為100%。所以還需要增加一個用例將“百分比”設置成100%，評論里面沒辦法加入截圖，如果有需要可以直接留言，我們一起探討~
贊
跟著步驟做了，但是水滴并沒有移動。 ?
是不是哪里出問題了？有問題的話我們可以一起討論 ??
我的也是不會移動
小技巧教程不錯，看起來不累，每次學一個。
后續有時間還會做一些簡單的小功能，有興趣大家一起學習