Scroll Progress Element
The Scroll Progress Element shows how far the visitor has scrolled through the page. A thin bar fills from left to right while the page scrolls down and is complete when the end of the page is reached. Scrolling back up empties it again.
It is a small help on long pages such as articles, guides or documentation: readers see at a glance how much is left. The bar can stay fixed at the top or bottom of the browser window, or sit at a place of your choice, for example inside a sticky header.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Scroll Progress Element
Add the Scroll Progress Element anywhere on the page and choose the Progress Bar Position. Fixed to Top and Fixed to Bottom pin the bar to the edge of the browser window, no matter where the element sits in the layout. Content Flow shows the bar exactly where you placed it. Default uses the position from Global Options.
Set the Progress Bar Height, then on the Design tab choose the Background Color of the empty track and the Progress Color of the filled part. Border Size, Border Color and Border Radius add a frame or rounded ends.
The bar always measures the whole page, from top to bottom, not the section it sits in. For fixed positions the Z-Index defaults to 99998 so the bar stays above the page content. Element Sticky Visibility lets you show the bar only in the normal or only in the sticky state of its container, which is useful inside a sticky header.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Scroll Progress. Change them there to style every Scroll Progress at once.
General
| Heading | Description |
|---|---|
| Progress Bar Position | Select the position of the progress bar. |
| Z-Index | Value for the progress bar’s z-index CSS property. For fixed positions, the default value is set to 99998. If you see page contents above the progress bar, you can also set a higher z-index on the wrapping container to fix it. |
| Progress Bar Height | Insert a height for the progress bar. Enter value including any valid CSS unit, for example 10px. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Background Color | Controls the background color of the progress bar. |
| Progress Color | Select a color for the progress bar. |
| Border Size | Set the border size. In pixels. |
| Border Color | Controls the border color for the progress bar. |
| Border Radius | Enter values including any valid CSS unit, for example 10px. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Use one Scroll Progress Element per page. Two bars that show the same progress confuse more than they help.
- If page content, such as a header, covers a fixed bar, raise its Z-Index or give the container that holds the element a higher z-index.
- Keep the bar thin, around 4 to 8 pixels, and pick a Progress Color with clear contrast to the Background Color.
- For a sitewide bar, place the element in a header layout section instead of on each page.
- On short pages the bar fills after a small scroll and adds little. Use it on pages that are several screens long.