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?


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.


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.