# 建立滾動的進度指示器

1. 設計進度條
2. 設置滾動觸發器
3. 設置滾動動畫
4. 覆蓋變換原點

## 設計進度條

1. 創建一個Div塊
2. 命名
3. 設置背景顏色
4. 把它放在想要的位置
5. 設定100%的寬度
6. 設定高度（例如，10像素）
7. 把它的位置固定在窗口的左上方
8. 設定足夠高的Z-index值，讓它總是在上層

## 設置滾動觸發器

在交互面板的頁面觸發器選單中，選擇"While page is scrolling(當頁面滾動的時候)"

## 設置滾動動畫

1. 從交互面板的"On scroll"選單中，選擇"Play scroll animation(播放滾動動畫)"
2. 在滾動動畫旁邊點擊加號
3. 給它命名（例如"滾動進度"）
4. 確保元素被選中，然後點擊0%處的加號，從下拉選單中選擇"Scale縮放"
5. 在Scale下，將X軸的位置改為0
6. 點擊100%處的進度條，在Scale下將X軸位置改為1

## 覆蓋變換原點

1. 在風格面板上，向下滾動到**Effects**
2. 點擊2D和3D變換旁邊的**更多選項圖標**
3. 將原點設為左邊