Streaming live at 10am (PST)

Progress Bar only in specific Section (not the whole Page)

Hi, I wonder if there is any possibility to make a Progress Bar which is working only in the selected section and stop at the end of this section. I have some extra content below the section and its probably make people confuse with post length.

Exactly like here: https://webflow.com/blog/after-effects-and-lottie-meet-webflow

Thanks in advance!

Hello @zaxarov

Yes, that blog post was built on webflow. Check this blog tutorial on how to do it https://webflow.com/blog/build-a-page-progress-bar. On the tutorial it shows you how to do it vertically but you can do it horizontally too.

Thanks, @Pablo_Cortes for your response. Unfortunately, I need a solution for not how to create progress bar but how to make this progress bar more intelligent to work (start and finish) only in one selected section in a whole page (multiple sections).

Any ideas?

@zaxarov,

So to do that you have to built a progress bar for each section and on your interaction you will have to select while scrolling and assign the correct percentage for each progress bar that you create on the page. So, let’s say you have four sections on your page, each one will cover 25% of the page right? So on the interaction you set the progress bar on the first section to go from size 0% to size 100% on 0 to 25% of the page, on the second section you make the second progress bar go from size 0% to size 100% on 25 to 50% of the page, and so on and so on until you cover all your sections. Does that make sense? Let me know if you get what I am saying.

Unfortunately my section is every time in different length because it’s a blog post. Sometimes it takes 74% and sometimes 87% of whole page, it’s not predictable. That’s why I want to create a progress bar indicator which works inside the section.

1 Like

Never thought of that scenario. I know adding content definitely messes with your scroll percentages. Not sure if Webflow is capable of re-adjusting the percentages intelligently. Curious to see what the solution may be.

@zaxarov,

It should not matter what size your blog posts take even if they are different each time we are talking about percentages. If one blog post takes 90% of the page the size of the progress bar will still go from size 0% to size 100% at the end of the scrolling. I suggest you build something to test the scrolling on different sizes of blog posts, that way you can see how to set your pages with a percentage progress bar that could work for different sizes. Good Luck.

Guys, why over complicate something ?

Just wrap all the content you want to "keep track of " inside a div (let’s call it wrapper). Select that wrapper, create an element trigger while scrolling in view and work from there. Or did I misunderstand what you’re trying to achieve?

It should not matter what size your blog posts take even if they are different each time we are talking about percentages. If one blog post takes 90% of the page the size of the progress bar will still go from size 0% to size 100% at the end of the scrolling

yeah this is true

1 Like

Hello @Jeandcc,

the problem is that @zaxarov wants to have multiple sections with different sizes and each section to have a progress bar. I think he knows that he has to have a wrapper and an element trigger while scrolling in view, but he also wants to know if the progress bar could work on dynamic content. Basically a progress bar for blog posts.

I think he’s trying to use the page as a trigger for the animation instead of the element itself… Let’s see what he has to say…

Thanks for your commitment guys!
I’d like to have the same solution like it is here: https://webflow.com/blog/after-effects-and-lottie-meet-webflow
There are [Blog Post], [You might also like…], [Join the conversation], [What’s Webflow] and [Footer] sections. Let’s assume that there are five sections in total.
What I want to make is to have a Scroll Indicator only in [Blog Post] section which shows reading progress only in this section.

I hope everything is clear now :slight_smile:

I’ll create an example to show it to you

Something like this?

https://jean-augustos-sublime-project.webflow.io/help-zaxarov

https://preview.webflow.com/preview/jean-augustos-sublime-project?utm_medium=preview_link&utm_source=designer&utm_content=jean-augustos-sublime-project&preview=f815bf95c4a9267ab758c446b9fe1bb6&pageId=5d7bd66ddc50c1748e7481c5&mode=preview

3 Likes

@Jeandcc you’re totally right and thank you so much for working example. It solves my problem :slight_smile:

2 Likes

Great to hear @zaxarov :webflow_heart: