A scroll progress bar is a thin bar that visually shows how far you've scrolled through a page. As you scroll, the bar extends from left to right, giving you an at-a-glance view of your progress through the page.
Tip: Setting up animations and effects in Studio.Design
In Studio.Design, you can create motion-based expressions like animations and effects using conditional styles.
When you set both a default style and a conditional style on a box element on your site, the difference between them plays as an animation. You can fine-tune the animation's motion using three settings: "Easing," "Duration," and "Delay."
In the "Scroll" conditional style, you can set up effects where the element moves in response to scrolling.
Step 1: Place the bar element
First, add a box that will serve as the progress bar.
Add a box where you want the progress bar to appear.
Open the [Box] tab in the right panel and configure [Layout] as follows. If the panel is closed, open the right panel.
Width: 100%
Height: 8px (adjust to match your design)
Margin (top/bottom): About 500px (this is needed to ensure enough scroll room — adjust to fit your actual page)
Background color: Any color you like (for example, blue #3B82F6)
Step 2: Set the transform origin to the left edge
To make the scale animation extend from the left edge, set the transform origin in advance.
With the bar element you placed in Step 1 selected, open the [Transform] tab in the right panel.
Click the middle-left dot (left column, middle row) in the [Origin] grid (3×3 dots) under [Transform].
With this setting, the bar will extend from the left edge instead of the center.
Note: You can't change the transform origin while in Scroll Preview mode.
Make sure to change the origin before setting up the scroll conditional style.
Step 3: Switch to Scroll Preview mode
Set up the scroll effect using the Scroll conditional style.
With the bar element from Step 1 selected, click [Conditional Style] at the top of the right panel.
Select [Scroll] from the style condition list to switch to Scroll Preview mode.
The right panel switches to the scroll effect settings, and a [Exit Scroll Preview Mode] banner appears at the top of the screen.
Step 4: Configure the timeline
In Scroll Preview mode, change [Timeline] to [Scroll].
Here's the difference between "View" and "Scroll":
View: The animation is tied to the period between when the element enters and exits the screen.
Scroll: The animation is tied to the page's overall scroll position (0–100%).
Since a progress bar shows how far you are through the whole page, use "Scroll."
Step 5: Set the scale at the 0% keyframe
Set the bar's length at the start (top of the page) and end (bottom of the page) of scrolling.
With this setup, the bar's scale X gradually changes from 0% to 100% as you scroll. Since you set the transform origin to the left edge in Step 2, the bar will extend from the left edge toward the right.
0% point (start of scrolling):
Click the [Add Style] button on the 0% row.
Select [Scale].
Set X to 0%.
100% point (end of scrolling):
Click the [Add Style] button on the 0% row.
Select [Scale].
Leave Scale X at the default 100%.
Step 6: Exit Scroll mode and preview
Once your settings are complete, return to normal editing mode using one of the following methods:
Click the [Back] button
(arrow icon) in the right panel.Click the [Exit Scroll Preview Mode] button on the banner at the top of the screen.
Step 7: Check the motion in preview
Finally, check how the animation works in action.
Click the preview button at the top right of the editor to open Live Preview.
Scroll through the page and confirm that the bar smoothly extends from left to right.
Tips for fine-tuning
Adjust the bar's appearance
You can adjust the bar's design by changing the box's styling.
Property | How to change |
Thickness | Change the bar element's height. |
Color | Change the background color. |
Rounded corners | Set rounded corners. |
Make a vertical progress bar
If you want a vertical progress bar, change the scale Y from 0% to 100% instead. Set the transform origin to the top-center of the origin grid, and the bar will extend from top to bottom.
Start the animation partway through the page
If you only want the progress bar to appear within a specific section of the page, set the timeline to "View."
With this setting, the animation starts when the bar element enters the screen.
Scroll-linked animation animation-timeline: scroll