Hi everyone.
I am just wondering if it is possible to make a preloader on Webflow.
I would like one on my own site and I’ve had a few requests from clients as well.
Thanks in advance,
John.
Here is my public share link: LINK
(how to access public share link)
Webflow doesn’t have an option for this, but you can add a prloader using Javascript. Google how to do it, there are a lot of methods.
However I feel I should warn you a bit here. Preloaders are a thing of the past, sort of. Early 00s, we had Flash 3 and a lot of preloading sites. And users hated that. Preloading went away. And nowadays it’s seems we forgot, or there’s a new generation of designers, and preloaders are back. But long story short: users still hate it.
Preloaders should be reserved for online applications (Like when Webflow loads its UI and site datas) but should be avoided for websites. Often, preloding are used to ensure all the data is loaded to… display a loading animation or intro, which is very counter productive on two levels: intro animation to delay the real UX with the site, and on top of it a preloader.
Hey @vincent,
Hope you are well.
Thank you very much for your advice. The only reason I was looking at one for my site is that when using Safari my website seems to take a while to load compared to Chrome and Firefox so was looking for an option rather than a blank screen for a second or so.
You may want to optimize what loads first rather than delaying the whole website to appear. I thought that was called “soft loading” and wanted to mention it but couldn’t find any obvious link or definition.
looking for it.
Hello,
Thank you @vincent for making me realize that users mostly don’t like preloaders 
Thought preloaders could also be a way to strengthens immersion.
I’ll do my best to avoid this in the future.
Thanks again,
Best
I think a preloader is possible using webflow without custom code. Wrap all your content with a div container. Point an interaction to this container with a load trigger and wait assets for load. Then simply add a div outside of the wrapper with a loading icon. That is just how I would try to achieve this. Let me know if your need further instructions.
Thank you for your help guys, very much appreciated.
Hi @UberGeekie, if I understand what the goal is, @zackete_de is correct, creating a page loader that will display some animation until the page has finished loading, without having to use custom code, is a simple process in Webflow.
Here is an example site that can be cloned, which has a basic page loader, that will wait until everything on the page has loaded, and then reveal the contents. In this example, I added an extra 2000ms delay to simulate the load time…
https://webflow.com/website/example-page-loader
If you are looking for a Lazy load kind of functionality which loads images as they come into view, then that would require some custom javascript.
I hope this helps.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.