How to Create a Vertical Progress Tracker

Hey there, Ash here from Elementor.

Adding interactive elements to your website creations can really take them to the next level.

We’ve created this website to celebrate ‘The History of Hats’ and we’ve implemented several subtle animations to our text and images to provide a smooth and fun experience for our website visitors.

The last aspect to add in is a timeline feature and we’ll use the ‘Progress Tracker widget’ to accomplish this.

The progress tracker widget is ideal for our requirements as it provides the website visitors with a visual representation of how far down the page they’ve scrolled.

We’ll align this with our ‘History of Hats Timeline’ to create a truly interactive experience.

For a full overview of the progress tracker widget, check out our dedicated tutorial linked in this video’s description.

To get started we’ll first search for and then drop in the ‘Progress Tracker’ widget into our pre-created page.

The tracker type we’ll leave as horizontal, and we’ll teach you how to position this vertically shortly.

For now though let’s configure the content which the progress tracker will connect to.

Under ‘Progress relative to’ we have several options. We’ll choose ‘Selector’ as our progress tracker will be connected to the inner section which contains our timeline.

If we select the inner section which holds our timeline and open the advanced tab, we’re able to set a CSS ID which will be our selector. In our instance, we’re going to call it ‘article’. Select this ID now and copy it.

Head back to the ‘Progress Tracker’ content tab now, type the ‘hashtag’ and then paste the ID into the selector field.

This directly connects the two.

The direction allows us to choose which way the progress tracker will fill, we’ll select right for our website.

And finally we can choose to show a percentage if we so wish.

Let’s now open up the style tab and apply some changes to our progress tracker so that it fits in with the branding of our website.

We’ll set the progress color first of all…and as you can see we’ve set up our global colors for ease.

Next we’ll enable a solid border…with a radius of 50px.

Moving down to the tracker background now, we’ll set the background as transparent…the border width…border color…and finally border radius.

Now with our general styling finalized, it’s time to rotate our progress tracker to display vertically instead of horizontally.

We’ll achieve this by using a small amount of custom CSS and also the transform options available within the advanced tab.

Paste in the following CSS code which you can find in this video’s description.

Here we are setting the width of our progress tracker to be 50% of the viewports height.

Now we’ll rotate this widget.

Expand the transform tab…enable rotate…then type 90 into the empty field. This will rotate our widget 90 degrees, giving us the desired vertical position.

We can also flip our element like so…as well as using negative values to achieve the same result.

If we scroll down now, you’ll see that our progress tracker is lost when we move down to our content. We need to make our progress tracker ‘sticky’ to ensure it remains within the viewport when we scroll.

We’ll close down the transform options, and then open up the motion effects tab.

Sticky, we’ll set it to ‘top’…and then we’ll apply a 100px offset so that our progress tracker has some space from the top of the viewport.

Scrolling down we can see our progress tracker in action and it looks great! It gradually fills as we move down the timeline’s content.

Let’s now check out how this works on different devices.

Enable responsive mode, and then switch to the tablet device.

As you can see our tablet view inherits the same layout as our desktop view so no further amendments are required here.

Switching to mobile view next, we can see that our current configuration isn’t going to work too well.

A better option here would be to rotate the progress tracker back to a horizontal position and then align it towards the top of the page.

Open up the transform tab and then enter 180 degrees into the rotate field.

Whilst this positions our progress tracker in the right place, we can see that the width of this element isn’t quite right.

To correct this we’re going to wrap our custom CSS in a media query, which will allow us to control the width on this specific device.

The custom code used in this tutorial can be found in the video description.

Just a couple more style amendments to make here and then we’re finished.

Open up motion effects and adjust the offset.

Then under style amend the tracker background height.

Perfect!

Thinking outside the box with widget usage can really open endless possibilities with your website creations, just like we did here by using the progress tracker to create a sleek timeline effect.

Share with us your widget experiments in the comments below, and be sure to let us know what you’d like to see in our next tips and tricks tutorial.

Thank you for watching. Be sure to like and subscribe for more amazing content.