How To Create Skeleton Loading Animation With CSS

Easy Tutorial thanks really helped . Makes UX really better

Love your video man!
From Nigeria...

I so thank you 🙏

Thanks

Thank you very much, great explanation, I like it

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

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

I tried using IMG tag method
at first, that's not working
But finally, I changed it by using::before pseudo and I got the desired result.
Thank me later

good

The problem with this approach are the sheer number of empty divs. We as devs should be limiting the number of divs as it takes up extra memory. We should be utilising css more. Generators are there to help

It looks professional, thanks man

Please anyone explain to me how he remove animation from text?

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

this is really bad approach because if you don't set any conditions, loading skeleton will not be stopped and it will keep playing on the background

Thank you so much !

Thanks Kyle. But it killed me when you typed "Lorem1" 😂😂

Are you somehow know python simplified because you both have similar channel name

Thank you!

Lame

I like your Jackson. I have 5 of them!

thats a lot of boilerplate code just for the placeholder.. can you put the content of the boilerplate code in css itelsef? like using css content property?

I dont know why but this isnt working on my image.
1) Its never ending
2) Its behind the image or some. I got no idea!!!!!

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 !

thanks for this video

Excellent!

amazing content crack ✔✔🙌

It just runs indefinitely for me

Great Man

Many Thanks, this was really helpful.

Isn't the animation just slowing down the actual loading of your elements ?

Fonts ain't too slow to load and I would consider loading interlaced .png file that loads a lower resolution and progressively renders a clearer image

Too many lines 😑 If you said CSS with "Simplified", why not using :before & :after without add too many DIV and Class 🧐 That will make your Page's Load will be fast 😏

Pls add vietsub :( it make me so happy

Ay thanks. Very helpful

THX !!!!

Awesome

Amazing content thanks

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

How can I add eventListener to all the elements and show different data when the elements are clicked?

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.

honestly i didnt like this approach but this gave me some ideas

If you have a skeleton text, that is a sign of a slow site. Fixing the speed doesn't involve changing the candies on UI. BTW the skeleton looks shitty/childish.

Why not use hsla instead of hsl and remove opacity. Opacity also affects the image while hsla would only affect the background-color.

So simple so nice. Well done

Looks great! Thank you very much.

Bro please make a tutorial on how to style HAIR like you...😀

wtf that's exactly what I need

I'm a bit shocked at how many people want to see this animation on their own website 😳
Please guys, learn how to build fast websites 🙏

CSS needs to add an isLoaded selector

hi is this is used just for dynami data / json or can it be used for a static html page as well

great video, thanks. What if I am not using javascript to prepopulate the fields, the loader won't work