Preloader animation - percentage level text - javascript

Hello everyone,
Any JS master here can please let me know if there’s a simple script that I can add to a text element to have it show the percentage of the page load, like in this example. I know how to control visibility when page is loading / finished loading with Webflow interactions, but can’t figure out how to make that text dynamic.

Hi @calin_balea,
i’ve already tried it, but didn’t make it. I found this on stackoverflow, but i wasnt able to implement it using webflow.

Hope i can help
Maxi

1 Like

Hey, @calin_balea, I’ve tried to implement do have a look at it.

Read-only link

Published Link

You can play with the easings and timings to make it cooler.

Hope it helps :peace_symbol:

Isn´t that only a jquery count animation. Set to 5sek.
Dont get me wrong this is great but it doesnt use the real site load duration. I know that it is possible to use the real load duration to show a percentage number. (there are js libaries to show a progress bar)

Maxi

Hey @MXI, I am aware of that it just I haven’t used em in any of my projects I will try to implement it and update the post. The above one was just a quick hack​:sweat_smile::peace_symbol:

1 Like

Hi @Sachin. Thanks for this. Yeah, as Maxi said, i’m looking for something that would display the actual load percentage, not just fake it somehow. It would need to look at the total page size and the amount loaded and calculate a percentage.

1 Like

Have you found a solution? I’m trying to figure this out too

Nope. I decided it’s not worth the headache since this is a fancy way to show a loader. Just create an animation in After Effects, export with Lottie, and create fake the loader. If you give it 3-4 seconds, it should be enough to at least load the top of the page in the background.