Streaming live at 10am (PST)

How do I create a progress bar animation like this one?

I’d like to create the same simulate progress bar in form as in this site - https://все-кухни.бел/. How can I do this? Is anyone know how to do this with webflow or I need to add only custom html and js?


Hi @Stepan2017

You can create this natively in webflow with IX 2.0.

You would create your site as normal, and then add a div block with position: fixed full
This would be your overlay.

Add your element and use the interactions to create your desired movement, or use a GIF.

Give the overlay you created an interaction so then on page load, say after 2 or 3 seconds, it hides and displays: none

If you wanted it to only display once and not repeat (like a cookie pop up), you would need code for this.

I hope that makes sense?

Hi @magicmark I mean interaction not when page is loading (this I could do), I mean this gradient animation

So sorry! My fault for not reading the question correctly. I thought you meant page load progress! :grimacing:

The form is easy enough to do in a slider… the bar I’ll have a look at doing one now and let you know!


So I can get the parts moving…

I’m not sure how to make them loop correctly. @pixelgeek, could you help?

1 Like

A bit more tweaking and I think it will be smooth.

Done it!
It’s just an illusion!


Thanks for advise. I’ve written for @PixelGeek

If you look at my read only link I have created that effect for you to look at.

Now is my fault for not reading the answer properly. But I couldn’t understand how you have done it? The second link open another project. In the first link I only see that it works.

1 Like

On the read only project, open the page that is called “progress bar” you will be able to see the animations.

The structure is easy, the animations are a little trickier.