Creating a Scroll Progress Indicator

Scroll (or Reading) Progress Bar is a nice way to show your users how far have they scrolled on your page. In this tutorial we will create a horizontal progress bar which width changes as we scroll down the page.

Let’s start with the progress bar. We will use a <span> element for this, but it works with any element like <div> as well. Open the DOM panel, select the dmx-app element (1) and add new component (2):

In the search input enter span, and select the span element:

Our span is now added on the page. Select it:

With the span selected, open the Design panel:

And let’s add a custom class to it. We enter progress-custom for the class name and select the create new class option:

Now let’s style our progress. We need it to be a few pixels high and positioned on top of our page, so it is always visible. So enter height 3px, select position fixed set top and left to 0px and add a z-index of 9999:

Then select the desired background color, i.e. the color you want your progress indicator to be:

Switch to App Structure:

And add a new component here:

We need to add the Browser component, as with its help we can see the current vertical scroll position:

Switch back to the DOM panel:

Select your progress indicator in the DOM tree and add a new attribute:

Open Styling and select Style:

We enter width in the style name input (1) and then click the dynamic data picker (2) to select a value for it:

In the Data Picker dialog, under the browser component open scrollY and select position. This property returns the vertical scroll position from 0 to 1. We need to multiply it by 100 in order to convert the value to percentage values. So we add *100 + % after the selected position property:

Save your page and you are done!
When scrolling your page, users will see a nice progress indicator on top of the page:

12 Likes

Nice tip

Thats pretty cool!