スクロール進行バーは、ページ全体のスクロール量を視覚的に示すための細いバーです。 ページをスクロールすると、バーが左端から右端へと伸びていき、ページ内スクロールの進行度がひと目で分かります。
Point：Studioでアニメーションやエフェクトを設定する
Studioでは、アニメーションやエフェクトなど、動きのある表現を条件付きスタイルを利用して設定します。
サイト内のボックス要素に、通常時のスタイルと条件付きスタイルの両方を設定すると、その差分がアニメーションとして再生されます。アニメーションの動き方は「イージング」「時間」「遅延」の3項目で調整します。
条件付きスタイルの「スクロール」では、スクロールに伴って要素が動くエフェクト表現を設定できます。
手順 1：バー要素を配置する
まず、プログレスバーとなるボックスを配置します。
プログレスバーを表示したい位置にボックスを追加します。
幅：100%
高さ：8px（デザインに合わせて調整してください。）
マージン（上下）：500px 程度（スクロール量を確保するために必要な設定です。実際のページに合わせて調整してください。）
背景色：任意の色を設定します（例：青 #3B82F6）
手順 2：変形の原点を左端に設定する
スケールアニメーションが左端を基点に伸びるよう、あらかじめ変形の原点を設定します。
手順1で配置したバー要素を選択した状態で、右パネルで[変形]タブを開きます。
[変形]内の[原点]グリッド（3×3 のドット）の左中央（左列・中段）をクリックします。
この設定により、バーが中央ではなく左端を起点に伸びていく動きになります。
注意：スクロールプレビューモードでは、変形の原点を変更することができません。
条件付きスタイルでスクロールのスタイルを設定する前に、原点を変更してください。
手順 3：スクロールプレビューモードに切り替える
条件付きスタイルのスクロールでスクロールエフェクトを設定します。
手順1で配置したバー要素を選択した状態で、右パネル上部の[条件スタイル]をクリックします。
スタイルの条件リストから[スクロール]を選択し、スクロールプレビューモードに切り替えます。
右パネルがスクロールエフェクトの設定画面に切り替わり、画面上部に[スクロールプレビューモードを解除]のバナーが表示されます。
手順 4：タイムラインの設定をする
スクロールプレビューモードで、[タイムライン]を[スクロール]に変更します。
「ビュー」と「スクロール」の違いは次のとおりです。
ビュー：要素が画面に入ってから出るまでの区間に連動してアニメーションする。
スクロール：ページ全体のスクロール位置（0〜100%）に連動してアニメーションする。
プログレスバーはページ全体の進行度を表すため、「スクロール」を使用します。
手順 5：0% キーフレームにスケールを設定する
スクロール開始時（ページ上端）と終了時（ページ下端）のバーの長さを設定します。
この設定により、スクロールに連動してバーのスケール X が 0% から 100% へ徐々に変化します。 Step 2 で変形原点を左端にしているため、バーが左端から右端へ向かって伸びていく動きになります。
0% 地点（スクロール開始時）の設定：
0% 行の[スタイル追加]ボタンをクリックします。
[スケール]を選択します。
X を 0% に設定します。
100% 地点（スクロール終了時）の設定：
0% 行の[スタイル追加]ボタンをクリックします。
[スケール]を選択します。
デフォルトのままスケール X: 100%にします。
手順 6：スクロールモードを解除してプレビューする
設定が完了したら、以下いずれかの方法で通常の編集モードに戻します。
右パネルの[戻る]ボタン
（矢印アイコン）をクリックする。画面上部バナーの[スクロールプレビューモードを解除]ボタンをクリックする。
手順 7：プレビューで動きを確認する
最後に、実際の動きを確認します。
エディタ右上のプレビューボタンをクリックして、ライブプレビューを表示します。
ページをスクロールしてバーが左から右へスムーズに伸びるか確認します。
調整のヒント
バーの見た目を調整する
バーのデザインは、ボックスのスタイルを変更して調整できます。
縦方向のプログレスバーにする
縦方向の進行バーにしたい場合は、スケールの Y を 0% から 100% に変化させます。 変形原点を原点グリッドの上中央に設定すると、バーが上から下へ伸びる動きになります。
ページの途中からアニメーションを始める
ページの特定セクション内でのみ進行バーを表示したい場合は、タイムラインを「ビュー」で設定をします。
この設定では、バー要素が画面に入ったタイミングからアニメーションが始まります。
スクロール連動アニメーション animation-timeline: scroll