No More Fake Loaders: Create a Real Progress Indicator

Подписаться 8 тыс.

Просмотров 1,8 тыс.

50% 1

Discover how to create an authentic progress loader for your website in our step-by-step tutorial! Learn to build a real-time progress indicator that accurately reflects image loading status, enhancing user experience and streamlining your site's functionality. Perfect for developers looking to elevate their interface design. Watch now to transform your loaders!
👯‍♀️ Clone it: try.webflow.com/cloneable-is-...
// FREE resources
✂️ Code Snippet Library: code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: www.webbae.net/roadmap-to-lea...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net/product/webflo...
// GSAP Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativecodingclub.com/bu...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae
Topics
00:00 Introduction
00:45 Caching?
01:45 Webflow build
05:16 Code
09:46 Delay loader because caching is too fast

Хобби

Опубликовано:

30 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 18

@tjk_9000 2 месяца назад

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

@webbae 2 месяца назад

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

@eli.alcaraz 2 месяца назад

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

@webbae 2 месяца назад

Glad you like it!

@elektrotwerk 2 месяца назад

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

@webbae 2 месяца назад

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

@digitalshane_ 2 месяца назад

Real loaders FTW! Love this video 🙌

@webbae 2 месяца назад

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.

@pablocortes682 2 месяца назад

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 2 месяца назад

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.

@GreenSockLearning 2 месяца назад

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! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7qRek2GLbB8.html

@philbass1952 2 месяца назад

Instant like

@alexandrb1543 2 месяца назад

😮

@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!