プログレスバーのデザイン

1. Divブロックを作成します
2. 名前を付けます
3. スタイリングの確認のために背景色を設定します
4. 好きな位置に配置します
5. 幅を100%に設定します
6. 高さを設定します（例: 10ピクセル）
7. 位置をビューポートの左上に固定します
8. 常に一番上に表示されるように、十分に高いz-index値を設定します

スクロールトリガーの設定

InteractionsパネルのPage triggerメニューから、While page is scrollingを選択します

スクロールアニメーションの設定

1. InteractionsパネルのOn scrollメニューから、Play scroll animationを選択します
2. Scroll Animationsの隣にあるプラスサインをクリックします
3. 名前を付けます（例: "scroll progress"）
4. 要素が選択されていることを確認し、0%の隣にあるプラスサインをクリックし、ドロップダウンからScaleを選択します
5. Scaleの下で、x軸の位置を0に変更します
6. プログレスバーの100%の位置で、Scaleの下で、x軸の位置を1に変更します

トランスフォームの基点の設定

1. In the Style panel, scroll down to Effects
2. Click the More options icon (ellipsis) next to 2D & 3D transforms
3. Set the Origin to the left
4. Styleパネルで、Effectsまでスクロールします
5. 2D & 3D transformsの隣にある More optionsアイコン（省略号）をクリックします
6. Originを左に設定します