1、新建Axure RP檔案，取名“Axure製作圓形旋轉載入進度環和百分比效果”,效果圖如下

2、拖入1個圓形控制元件，設定邊框色，背景色都為藍色，大小200px*200px。

3、拖入一個小圓形控制元件，設定邊框色，背景色都為白色，大小150px*150px，與大圓圓心重合。

4、同時選中大圓和小圓，單擊右鍵，Transform Shape——Substract，剪下得到空心環。

5、拖入一個矩形框，覆蓋掉圓環右半部分。

6、同時選中矩形框和圓環，採取和步驟4一樣的操作，得到左半邊圓環。

7、複製半圓環，並旋轉180度。將得到的兩個半圓環複製一份，並將背景色設定為灰色。

選中半圓環，單擊右鍵，選擇Transform Shape——Flip Horizontal即可完成180度旋轉。

分別為四個半圓環設定名字為左環、右環、左槽、右槽，並按照右槽、右環、左槽、左環的順序設定放置層級。

拖入文字標籤Label，取名“進度值”，初始值為0%。

拖入button，取名“開始”。

Ok，如下圖，一切準備工作就緒。

8、把藍色兩個半圓連線在一起形成一個圓，灰色的也是，並將灰色的覆蓋在藍色之上。

9、思路

（1）根據四個半圓環拜訪層級，右環（藍色）以左邊為中心順時針旋轉180度，此時右環旋轉到左槽之上，顯示半個藍色環。

（2）此時設定左環（藍色）到最上層，左半邊仍然是藍色的（注意設定時間必須等右環完全旋轉180度後設置）。

（3）左環（藍色）以右邊為中心完成順時針180度旋轉。

10、由於進度值域需要不斷重新整理計算進度值，採取顯示隱藏進度值域來實現迴圈重新整理，設定進度值域為隱藏。

新增開始按鈕Onclick事件。

（1）Show 進度值（以下圖中為Show開始有誤，不再重新截圖）

（2）右環以左邊線為中心旋轉180度，5秒鐘，線性。

（3）等待5秒

（4）把左環設定到最上層

（5）左環以右邊線為中心旋轉180度，5秒鐘，線性。

11、旋轉效果製作完成，接下來製作進度值顯示效果。

設定進度值OnShow事件如下：

（1）wait 0ms，重新整理進度值標籤所用

（2）設定進度值

進度值=100*（左環旋轉角度+右環旋轉角度）/360（%）

（3）Hide 進度值

（4）Show進度值，通過隱藏、顯示達到迴圈觸發進度值OnShow事件的目的。

全部完成，F5檢視效果。似乎邊框處理不太好，原理即為如此。