加載時，一個簡單的進度條或許能讓網站增彩很多。

這個進度條的特點是：無論大小如何縮放，都不會影響進度條的質量(話說的有些絕對了，個人覺得絕大部分情況下不會出現問題)，預覽一下效果吧。圖片有些失真，將就一下。

一、元件準備

1、矩形框一個。作為背景用，命名“背景”；

2、動態面板一個。作為進度條，命名“進度條”。里面放置一個矩形框，性狀大小與“背景”矩形框保持一致，顏色不一致即可；

3、水滴標記一個。作為進度百分比；

二、添加用例

1、本文的進度條相當的簡單，只有“進度條”動態面板有用例；

1)“進度條”載入時，設置進入條的寬度(長度)為“背景”矩形框寬度(長度)的百分之一；

2)在“進度條”面板尺寸改變時，去判斷“進度條”的寬度(長度)是否小于“背景”的寬度(長度)。①如果小于，則先等待一段時間(不然的話看不到進度條的效果)；②設置“進度條”的寬度(長度)為當前進度條的寬度(長度)+“背景”的寬度(長度)的百分之一；③移動“百分比”水滴標記的位置，是“百分比”水滴標記的中間位置在“進度條”的右側；④設置百分比到“百分比”水滴標記文本；

①等待一段時間時間(時間長短可自行設計)；

②設置“進度條”的寬度(長度)；

③移動“百分比”水滴標記；

X：

Y：

④設置百分比到“百分比”水滴標記；

三、預覽

至此，簡單的進度條原型已經完成了，F5一下吧~

PS：只要保證“背景”的起始位置和“進度條”面板的其實位置一樣，且“背景”的寬度(長度)和形狀與“進度條”動態面板里面的矩形框的寬度(長度)和形狀一致，基本上可以保障進度條的縮放不會影響到到進度條的功能，有興趣的朋友不妨一試。

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