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.
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.
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
@@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 })
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");
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!
This is absolutely great, I noticed youtube video has a loading animationa and wondered how it works and your video is recommended by TH-cam. So GREAT.
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 !
"one of the best loading experiences a user can experience" - is a reminder of what we are really telling the user: you cannot yet interact with this site. I'm glad Kyle effectively acknowledges this upfront since I have "front end devs" who think they are adding some sort of functionality to the site by using this. Still, this is good info for when it is appropriate to use.
Hello Sir! I am Areeb. I watched your video. Appreciate it because your videos help me to make different project. But I googled a lot about how to make web hosting machine or web server. Can you tell us more about web server.
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.
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
![เขามัทรี - เอ็กซ์ ศุภกฤต - จอนนี่มิวสิค [ Official MV ]](http://i.ytimg.com/vi/AS9ufKuQIVs/mqdefault.jpg)
![HIWWHEE | OHM [Official MV]](http://i.ytimg.com/vi/OJJLtTLqLag/mqdefault.jpg)
This is precisely what I needed, was just about to make some of these tomorrow lol!
Cringe
@@elpolodiablo5486 No.
Update?
Nyoom
me too
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
Cool
Your consistent new videos are so refreshing. I knew I made the right decision subscribing mate. Thank you Kyle ❤️
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.
Wow!! haven't thought it was so simple. Thanks for this Kyle :)
same here
Exactly what I needed to know right now. Thank you you are awesome
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.
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
Thanks kyle. Before I have no idea about Skeleton!
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!
Looked so simple yet so effective! Thanks for sharing this.. keep doing these things!
So much to learn on every topic :)
Isn't leaving the animation still on after the contents have loaded bad for the performance? I thought animation increases CPU usage.
I agree. Css animation use a lot of cpu
@@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 })
@@Italiafani excellent bro!
@@Italiafani You're right, I have omitted the skeleton class left in the image.
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");
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!
Couldn't have come at a better time, I needed this at work! :D
As allways you coming right on time, exactly when i wonder how to implement it well haha,
Thanks again man!
Exactly what I need, very simple, understandable and so accurate. Thank you so much !
This is absolutely great, I noticed youtube video has a loading animationa and wondered how it works and your video is recommended by TH-cam. So GREAT.
Just thought about it yesterday and today it's here. Thanks Kyle 👍
Awesome content as always, thank you Kyle!
I was just thinking about this one, Thank you for this ❤
This is what I was searching for Thankx bro❤️
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 a lot for this. I was legit thinking about learning how to implement this on my site
I didn't even know how to search this thing. Thank you Kayle.
Very nice and concise.
Would love to see more css shorts like this.
Okay I'm sure you're reading my mind. First with stripe and now this. Thanks so much man!!
Your videos are awesome! Thank you for doing these. I’ve watched so many of them.
As always - great tutorial. 😍
Thank You so much, it might be useful in future projects.
I exactly understood your video and implemented skeleton UIs myself. Thank you
Wonderful
Waiting for long time for the right video....
Thanks the great content. I’m doing some page content loading this works better then loading bar
I didn't know you could throttle the speed, that is awesome
Love your video man!
From Nigeria...
Excellent video! Thanks for sharing this. Very handy. 👍🏼👍🏼
Easy Tutorial thanks really helped . Makes UX really better
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.
You are great dud thanks!
That was a smooth implementation.
Yep
Thanks for idea for loading screen for my frontend!
Thanks Kyle. But it killed me when you typed "Lorem1" 😂😂
I've been looking for it, Thank you so much
Another great video, thanks man!
I was thinking about how to do that from long time. Thank you 💓
Awesome 😎
Love From Nepal 🇳🇵
Thanks a lot for this video!
Eagerly waiting to see right approach about preloader / skeleton loader...
Hey Adarsh. Are you looking out for opportunities in software development currently? Did you work on projects related to React/Node?
@@Hafsa0526 Not intrested...
Thanks again
nice its so easy to do lol. thank you
also nice trick for dealing with data coming from the server by using cloneNode
These videos are incredibly helpful.
"one of the best loading experiences a user can experience" - is a reminder of what we are really telling the user: you cannot yet interact with this site. I'm glad Kyle effectively acknowledges this upfront since I have "front end devs" who think they are adding some sort of functionality to the site by using this. Still, this is good info for when it is appropriate to use.
Kyle is on 🔥. Awesome job bro 👍👏
I like your Jackson. I have 5 of them!
Thanks a lot!
bro that is amazing and i realy need that
High quality information. Thank you so much
Good one
*0 dislike u deserve it!* ♥♥
Yes
Hello Sir! I am Areeb. I watched your video. Appreciate it because your videos help me to make different project. But I googled a lot about how to make web hosting machine or web server. Can you tell us more about web server.
It looks professional, thanks man
Ay thanks. Very helpful
really amazing bro how we simply we can create a skeleton loading in just few minutes
So simple so nice. Well done
You are awesome, can you make a video on Lazy Loading with image?
You explained it very well
Thank you very much, great explanation, I like it
Many Thanks, this was really helpful.
Great Man
great video, thanks. What if I am not using javascript to prepopulate the fields, the loader won't work
Looks great! Thank you very much.
It's way better than those circle or linear loaders, because this will not flicker html containers when the real content will be rendered.
This is pretty straightforward but might have imapact on the performance of the code and the site
Great content 👍
amazing, thanks!
Thanks for this 👍❤️
Thank you
Excellent
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
Thanks mate 😄
Awesome stuff, thank you Sir.
I love it
Thanks a lot Kyle:)
Thanks
TOP 👌🏽...dependent dropdown in react js 🙏
This man is 🔥🔥🔥🔥🔥🔥🔥
I think you just read my mind!
👍👍👍 Thank u.
Thank you so much! Awesome content
Cool vid. Thanks bro.
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.
Ty. Good that I subbscribed on channel a while ago =)
5:27 there is a problem, you are making the image transparent too
Yeah I noticed, but good thing he said in his opinion, so it's personal preference matter I guess.
You can add opacity property on the image
Async UI FTW!!!
Make a tutorial how to implement subscriptions with stripe
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
Andy Howard css skeleton screen generator
0 dislikes, humanity still exists!!
😁❤️
@Dylan O'brien May be you disliked?🤨
thanks for this video
Thank you!
Excellent!
Why not use hsla instead of hsl and remove opacity. Opacity also affects the image while hsla would only affect the background-color.
Good call. My bad.
Awesome video .. thank you kyle..