How to make a linkable horizontal progress bar (example included in post)

Hi all,

I am wondering how the element screen-shotted below was created. It’s included in one of the webflow showcases. A link to the page where it can be found is attached below.

I’ve combed through the read-only file, but there is no sign of how it was done. As you scroll, the dot that is filled in moves down the line. Each dot can also be clicked on and it will jump to that place on the page. Any help would be greatly appreciated!


Here is a link to the example: https://preview.webflow.com/preview/bagsconcept?preview=e12432d347381f48c4a87b4d4df18b70

Hi @jmovish

It looks like a clever version of a navbar linking to sections. That dot isn’t moving as such, just a new link is being highlighted as you scroll to that section in the page, and similarly when you click on a dot it takes you to the corresponding section.

The simplest way to get your head round it is imagine for a moment those dots as a standard nav menu list with text links; you might change the colour of text, or the button shape that surrounds them, when you are on the ‘current’ section it links to.

The dot shapes have been made by using a link block with a border of 2px with a radius of 30px, the link block doesn’t need to contain text so is simply a box made circular. When the link is the ‘current’ one it is set to a background of white, and when not current, is set to transparent.

Hope that helps!

Stu

Yes @StuM … but I’m with @jmovish… I looked and I was laughing to myself just staring… I can’t see how it’s done either. I understand like you explained “What” it’s doing… the question is “How”?

I’m looking at it, saying okay it must be a state. But if you go to states and see it, then look for the action, I couldn’t find it. Maybe I’m just missing something :slight_smile:

Hi @garymichael1313

I think/hope it’s even simpler than it seems!

Agreed - there doesn’t appear to be any ‘states’ as in hover/pressed/focused!

It looks as simple as: ‘pagination link’ is built with the transparent circle.
However when the ‘pagination link’ is also ‘current’ there is then a white background applied.

So when you are ‘currently’ in a specific ‘section’ of the site, it’s corresponding ‘pagination link’ will have the full white circle rather than the transparent one…

Maybe i’m missing something though…you got me doubting so I need to build one myself now and see if it is that simple :joy:

Ha… I know right! I understand the state effect… but you look you can’t find the action… there has to be an interaction to, “tell the hover state it’s on the right section so turn white”. And I’m still looking at it now and can’t find where/which trigger element tells the pagination link to “animate”. A hover wouldn’t work with a scroll trigger. Man… this is a tough one… maybe someone will chime in and find it… if you do please please share.

We’re going to solve this one @garymichael1313 - can’t rest easy til we do!

I’m not seeing a ‘hover state’ in use - if I hover over the dots, they stay as they are, only changing when the correct section is in view.

I’m also not seeing an interaction or animation, in action, or required, just the dot’s style (transparent or white) switching based on the section that is in view…I think it tricks the eye (together with the page background colour change) into looking like an animation…

I KNOWWWW RIGHT! It’s a really smooth cool navigation that I want to create and use later… it’s driving me crazy.

Ok @garymichael1313 @jmovish here’s my attempt at recreating it with some 100vh sections: dotnav.webflow.io

https://preview.webflow.com/preview/dotnav?preview=e1fba5299e7f3eb6cfb1dbe81ecfd7d0

One thing I noticed was in the original project - there is a small delay where the circles are all transparent before the next link one becomes white, giving the illusion of an animated delay.

It looks like this is made by either padding or margin added to each section - scroll slowly past the shaded parts in my project where I added some - (the original had 30vh padding, and 100 and 200 margins in places)

The original also has a colour on the ‘body’ so any margins just appear the same colour as if continuous.

If I was to remove the margins/padding, the switch from transparent to white is instant, so it looks like playing around with those will get the delay that looks animated…

Are we getting closer? :thinking: :nerd_face:

Since each dot is linked to a section, the dot is filled in the “current” state. If you take a look at the class “pagination link” it has a transparent background. But the combo class “pagination link” with state “current” has a white background. That’s what fills the dot as you scroll down.