Streaming live at 10am (PST)

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


#1

Hallo!
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?

TIA


#2

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?


#3

Hi @markos84uk I mean interaction not when page is loading (this I could do), I mean this gradient animation https://share.vidyard.com/watch/SCq59EBgVEigxtn6HnKfYZ


#4

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!

CloudApp

#5

So I can get the parts moving…

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

http://magicians-sandbox.webflow.io/progress-bar

https://preview.webflow.com/preview/magicians-sandbox?preview=454975d6856e10b34ae69debfe0f883f


#6

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

EDIT!
Done it!
It’s just an illusion!

CloudApp

#7

Thanks for advise. I’ve written for @PixelGeek


#8

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


#9

:sweat_smile:
Sorry!
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.


#10

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.