How To Create Skeleton Loading Animation With CSS

Подписаться 1,6 млн

Просмотров 291 тыс.

50% 1

CSS Selector Cheat Sheet: webdevsimplified.com/specific...
Skeleton loading is one of the best loading experiences a user can experience. It is used on nearly every large site including RU-vid and in this video I will show you just how easy it is to set up your own Skeleton loading animation.
📚 Materials/References:
CSS Selector Cheat Sheet: webdevsimplified.com/specific...
GitHub Code: github.com/WebDevSimplified/s...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:30 - Demo
01:45 - Image skeleton loading
05:35 - Text skeleton loading
07:50 - Implementing skeleton loading
#SkeletonLoading #WDS #CSS

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

15 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@Zeilar 2 года назад

This is precisely what I needed, was just about to make some of these tomorrow lol!

@elpolodiablo5486 2 года назад

Cringe

@tomcoop9750 2 года назад

@@elpolodiablo5486 No.

@TheUtuber999 2 года назад

Update?

@sanusihassan7125 2 года назад

Nyoom

@aritra3004 2 года назад

me too

@camc6864 2 года назад

Your consistent new videos are so refreshing. I knew I made the right decision subscribing mate. Thank you Kyle ❤️

@husseinkizz 2 года назад

I wanted this kind of stuff from your channel a year ago, but now I have it. I have been doing it the hard way, thanks for simplfying the web!

@ayushniroula1781 2 года назад

Exactly what I needed to know right now. Thank you you are awesome

@darkmift 2 года назад

Very nice and concise. Would love to see more css shorts like this.

@TheDmNtd 2 года назад

Couldn't have come at a better time, I needed this at work! :D

@chetan3283 2 года назад

Looked so simple yet so effective! Thanks for sharing this.. keep doing these things! So much to learn on every topic :)

@cryptogap5559 2 года назад

Your videos are awesome! Thank you for doing these. I’ve watched so many of them.

@blankdeepspace1488 2 года назад

Just thought about it yesterday and today it's here. Thanks Kyle 👍

@colinm3130 2 года назад

After watching this video I just implemented it on an app I am working on at work. I used some very different settings, but this video inspired me to give it a whirl. Because it's an internal tool and there is a very fast load time it wasn't totally needed, but I had a fun time trying it out. Thanks for this video!

@pauljohn3898 2 года назад

This is absolutely great, I noticed youtube video has a loading animationa and wondered how it works and your video is recommended by RU-vid. So GREAT.

@edwardyakovich2053 2 года назад

Cool tutorial, I dig it. I've been using something pretty similar for years, which has worked great. I use a "data-attibute" approach and the :empty CSS pseudo-class. So, on the parent DIV that you're loading stuff into, have a data-attr, examples such as: data-skeleton-load="full" or data-skeleton-load="table" or data-skeleton-load="card" or data-skeleton-load="form". Basically just keep the parent DIV empty until the data loads in, and while empty, the css loading animation will occur from one of your loading templates. Kinda same idea, just a little different.

@anticsBack 2 года назад

Awesome content as always, thank you Kyle!

@arneg4588 2 года назад

funny how this is the last thing to a big intranet dashboard page where sometimes its good to have something like a skeleton loading, perfect timing master web :D

@brijspy 2 года назад

Wow!! haven't thought it was so simple. Thanks for this Kyle :)

@jamjam3448 2 года назад

same here

@paulreyesdigital 2 года назад

I was just thinking about this one, Thank you for this ❤

@krux02 2 года назад

The most important part to get your site fast is to bundle everything in a static page. Do not send an empty page to the end user with lots of javascrit that then starts to incrementally load one element at a time with many API requests. That is how you get to 90s internet performance.

@xKond3i 2 года назад

As always - great tutorial. 😍 Thank You so much, it might be useful in future projects.

@solvedfyi 2 года назад

I'm just here to give props for when the topic is specific, straightforward, and not clickbait. We can't just comment on the negative

@insideTheDiv 2 года назад

Cool

@NNNedlog 2 года назад

Thanks a lot for this. I was legit thinking about learning how to implement this on my site

@cleaningspy 2 года назад

Thanks kyle. Before I have no idea about Skeleton!

@lethe_yoon Год назад

I exactly understood your video and implemented skeleton UIs myself. Thank you

@Skalexsong 2 года назад

Exactly what I need, very simple, understandable and so accurate. Thank you so much !

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

As allways you coming right on time, exactly when i wonder how to implement it well haha, Thanks again man!

@omrajeshkbangalore2092 5 месяцев назад

I've been looking for it, Thank you so much

@Jolterix20 2 года назад

Okay I'm sure you're reading my mind. First with stripe and now this. Thanks so much man!!

@TecheremHizz 2 года назад

This is what I was searching for Thankx bro❤️

@alexkail3 2 года назад

Excellent video! Thanks for sharing this. Very handy. 👍🏼👍🏼

@T3hIluvatar 2 года назад

These videos are incredibly helpful.

@questionable-cf1tt 2 года назад

Another great video, thanks man!

@riajmazumder4434 2 года назад

I was thinking about how to do that from long time. Thank you 💓

@adnanahad 2 года назад

Wonderful Waiting for long time for the right video....

@resolutionAgha 2 года назад

High quality information. Thank you so much

@keremardicli4013 2 года назад

So simple so nice. Well done

@dmytrokravtsov5745 2 года назад

Looks great! Thank you very much.

@teyjingwoon 2 года назад

Thanks the great content. I’m doing some page content loading this works better then loading bar

@srinathsathyanath7435 2 года назад

Kyle is on 🔥. Awesome job bro 👍👏

@user-ie7md3mm6x 2 года назад

Thank you so much! Awesome content

@quickwebtutorials4312 2 года назад

I didn't even know how to search this thing. Thank you Kayle.

@youcefg9760 2 года назад

Thanks a lot for this video!

@juststudying1019 Год назад

It looks professional, thanks man

@the_full_stack_junkie 2 года назад

You are great dud thanks!

@ayedabboushi7221 2 года назад

Many Thanks, this was really helpful.

@prabhakarmishra2182 2 года назад

You explained it very well

@SharkBait_ZA 2 года назад

Awesome stuff, thank you Sir.

@Fooljuice 2 года назад

Ay thanks. Very helpful

@dheemanthm.d3836 2 года назад

Thanks for this 👍❤️

@Ayydos 2 года назад

amazing, thanks!

@PythonExploratorium 8 месяцев назад

Love your video man! From Nigeria...

@jajcarzek 2 года назад

Thanks for idea for loading screen for my frontend!

@TheFirefox1948 2 года назад

That is very slick!

@peter9759 8 месяцев назад

Easy Tutorial thanks really helped . Makes UX really better

@konstantinkirichenko9863 2 года назад

Cool vid. Thanks bro.

@aytacg26 Год назад

Thank you very much, great explanation, I like it

@lucienchu9649 2 года назад

I was eager to know how it does previously. Then the trick part is that, you better know how many contents (cards) you gonna populate, or simply fill the view port with cards, kind of brutal. Great content !

@hassaneoutouaya Год назад

Thank you so much !

@prasannanaik1023 2 года назад

Great content 👍

@h.nazmulhassanrakib5058 2 года назад

Awesome video .. thank you kyle..

@nicolasrama906 2 года назад

Excellent!

@truongpm2144 2 года назад

Awesome, thanks you very much

@tabdig 2 года назад

Thanks mate 😄

@user-ug1vi3bv1f Год назад

Thank you!

@jamjam3448 2 года назад

Thanks a lot!

@bhattaraitheaxe 2 года назад

Awesome 😎 Love From Nepal 🇳🇵

@NNNedlog 2 года назад

Thanks a lot Kyle:)

@vengeance9047 2 года назад

This man is 🔥🔥🔥🔥🔥🔥🔥

@gopalloharnew5948 2 года назад

Great Man

@adrienguylagrange4453 Год назад

Thank you very much my friend, this is exactly what I was looking for. Very understandable and simple. You have just gained a new subscriber

@tariqmezeik 2 года назад

Amazing content thanks

@braumski2 6 месяцев назад

I didn't know you could throttle the speed, that is awesome

@gillbates9668 2 года назад

thanks for this video

@Arabian_Epileptic 2 года назад

Thanks again

@arunkumarmathivaanan5700 2 года назад

Thanks for sharing.

@95jugal 2 года назад

That was a smooth implementation.

@insideTheDiv 2 года назад

Yep

@qwerty-wk4pz 2 года назад

Thank you

@shaikshavalisyed2012 2 года назад

Excellent

@iamreg1965 2 года назад

Neat idea but I still like a splash screen. Diff'rent strokes and all that eh? Nice work Kyle, always look forward to new content from you man.

@kybkap8686 Год назад

nice its so easy to do lol. thank you also nice trick for dealing with data coming from the server by using cloneNode

@djameleddinedeghmoum3099 2 года назад

Awesome ❤️😎

@user-ko1cw6mv4q Месяц назад

Awesome ❤

@insideTheDiv 2 года назад

Cool content bro ❤️❤️

@slowprogrammer 2 года назад

Good one

@user-xx2xx7qj7q 9 месяцев назад

I so thank you 🙏

@aravindelumalai8727 2 года назад

thank you

@AlexTriche 2 года назад

Material-UI v5 (to be released on September 1st) will include a skeleton component for all React Developers, with almost the same styles as Kyle's demo.

@vipercode4792 Год назад

Thanks

@rajeevkumar-si8gy 2 года назад

I love it

@AH-cf9cv 2 года назад

👍👍👍 Thank u.

@daveglad3554 2 года назад

TOP 👌🏽...dependent dropdown in react js 🙏

@julienfaelli6587 2 года назад

THX !!!!

@powerseostrategy 2 года назад

I like your Jackson. I have 5 of them!

@bosmertheincredible 2 года назад

Ty. Good that I subbscribed on channel a while ago =)

@javadmh7827 2 года назад

Awesome

@recoder1111 2 года назад

Isn't leaving the animation still on after the contents have loaded bad for the performance? I thought animation increases CPU usage.

@justpatrick_ 2 года назад

I agree. Css animation use a lot of cpu

@Italiafani 2 года назад

@@OdyssME Emptying the grid only clears out the placeholder cards. There are no animations on the grid element itself. The skeleton text animations are not a problem, since he replaced the contents of the title and body of the card, clearing the animated placeholder divs. However, the image still has the animation going on after it's loaded. To disable this behaviour, you could do something like: const img = div.querySelector('img') img.addEventListener('load', () => { img.classList.remove('skeleton') }, { once: true })

@jamjam3448 2 года назад

@@Italiafani excellent bro!

@OdyssME 2 года назад

@@Italiafani You're right, I have omitted the skeleton class left in the image.

@narudesigns 2 года назад

Exactly what I was thinking. Maybe we can toggle the class the classList method in javascript before and after the actual data has been loaded like element.classList.toggle("skeleton");