No More Fake Loaders: Create a Real Progress Indicator

[@tjk_9000]

this is awesome and easy to follow. great backup plan when the client wants to load a zillion photos on a page.

[@webbae]

glad you liked it - can be done for videos too!

[@eli.alcaraz]

The fact that this is cloneable for us noobs who can’t code makes this the cherry on top.

[@webbae]

Glad you like it!

[@elektrotwerk]

Fake loaders are one of the most annoying things in web design. Thanks for the great vid!

[@webbae]

Haha I honestly am cool with them but they should be recognized for what they are: vanity showcase of animation skills and brand identity building lol. As such, we only need to display it to the user once and then move on with our CTA. ✅ Brand Identity

[@GreenSockLearning]

Love that you posted this immediately after Cassie's webflow stream where we covered the animation side but didn't dig into the details of *how* to detect image load. Such perfect timing. Hero! kzbin.info/www/bejne/baK1lp5ofLGVeJo

[@digitalshane_]

Real loaders FTW! Love this video 🙌

[@webbae]

Thanks Shane - it's funny how fast it gets when local caching is enabled. I think a good addition would be issuing a cookie or using local storage to only show the loader once per week or something.

[@michaellee509]

Thanks for the tutorial! I have a PNG sequence of 45 images loading from Cloudinary into a element, which can take some time to load and is a main feature of the homepage. It doesn't appear though that the imagesLoaded library is including these images in the calculations. Is there something I missed or need to include for it to also include these images? Essentially the homepage takes significantly longer to load because of this PNG Sequence element and so I wanted an accurate page loader for the homepage specifically so that the loader would wipe away after the PNG sequence was loaded and there wouldn't be a time where nothing was showing up on the page. Any help here would be awesome!

[@webbae]

weird that imagesLoaded isn't seeing the images. How are you bringing them into ? Maybe you can share a code snippet in Discord? You could try waiting for the image .complete event with vanilla JS but my hunch is that if imagesLoaded is missing it then it's being brought into your project in a different way than the browser would recognize too! 🤷‍♂️ .complete event: developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement discord: discord.gg/F9mQ3C78

[@michaellee509]

@@webbae Thanks for the reply! I dropped a question in Discord, but the code snippet was too long and I had to make a Codepen for the code. Any help towards debugging is much appreciated!

[@pablocortes682]

This was another great tutorial, thanks WebBae! I always wondered why every codrops tutorial code had this imagesLoaded library in them. Now it makes more sense. It also works for masonry layouts right? something to do with the browser calculating the size of images.

[@webbae]

hey Pablo this should work for all images, so yes, masonry layouts too. if you are using a JS library for masonry, it likely ships with some loading utilities (lazy loading?). Lazy loading might be something to watch out for, since Webflow does it by default! images and videos come with onload events by default, so you could do this in vanilla JS too and include video! The key is knowing your way around dev tools to understand how your website assets are loading since there are a lot of factors that go into it.

[@mehdigolshan2587]

Hello and thank you! Please leave the same training with JavaScript and jQuery and without Gsap.

[@webbae]

I have a whole course on Javascript in Patreon. It's project-based (inspired by paid client projects I've done) and uses Webflow - I think you might like it! www.patreon.com/collection/175938

[@philbass1952]

Instant like

[@alexandrb1543]

😮

[@heatherliu6856]

Need a blacklist of websites using fake loaders so I can never visit them again

[@webbae]

Parental control ON 💡