DEV Community

Cover image for Build a Pixel Perfect Skeleton Loader Using CSS πŸš€

Build a Pixel Perfect Skeleton Loader Using CSS πŸš€

Ram Maheshwari ♾️ on September 15, 2021

Skeleton Loaders are used very commonly in Modern Websites/Apps to indicate loading of data instead of using the traditional loaders, spinners, etc...
Collapse
 
tomyo profile image
Tomas Hayes • Edited

How do the user detail elements get the width, when on skeleton mode (without text inside)?

Nice idea to set dimensions on containers for this effect!

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️

Yeah, if there's no text inside then we can set height for the elements. Thanks for sharing it, Tomas πŸ˜„

Collapse
 
modelhusband01 profile image
Model Husband πŸ‘‘

How can I just use the avatar and text beside it alone

Thread Thread
 
rammcodes profile image
Ram Maheshwari ♾️

If you mean how I'm making the avatar and text sit on the same line then for that I'm using the flex property on the container which will make the items inside it like text and avatar sit on the same line.

Thread Thread
 
modelhusband01 profile image
Model Husband πŸ‘‘

Okay what if I want to use the avatar and text repeatedly just like messages in Whatsapp how will I do that

Collapse
 
amircahyadi profile image
Amir-cahyadi

Its awesome πŸ‘

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️

Thanks a lot, @amircahyadi πŸ˜„

Collapse
 
midouwebdev profile image
MidouWebDev

Awesome !

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️

Thanks a lot, @midouwebdev πŸ˜„

Collapse
 
plondon profile image
Philip London

I've re-implemented this as a lesson on codeamigo.dev. You can check it out here: codeamigo.dev/lessons/start/87 if you're interested!

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️

Amazing, Thank you so much ❀️

Collapse
 
yaxx profile image
yaxx

Nice one, but how do you determine the number of skeletons to display compare to the number of incoming data

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️

It's up to you on how many Skeletons you wanna display and if you have pagination like you only show n number of items then you can show n number of skeleton screens.

Collapse
 
yaxx profile image
yaxx

I will personally render the skeletons just enough to fill the items view port even though the number of incoming items are greater, less than or equal to the number of pre-rendered skeletons.

Thread Thread
 
rammcodes profile image
Ram Maheshwari ♾️

That's a great idea, I will keep that in mind and hopefully will implement enough skeletons to fit the viewport/layout. Thanks a lot for sharing πŸ˜„

Collapse
 
zeonlife profile image
ZeonLight

nice

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️

Thanks a lot, @zeonlife

Collapse
 
maitrungdong profile image
Mai Trung Đông • Edited

An amazing good job, bro!!!! β€πŸ’―

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️

Thank you so much, @maitrungdong πŸ˜„

Collapse
 
sirmed profile image
Sirmed Mehmood

But how de we make the "shine" dissapear when the content is loaded?

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️ • Edited

The idea here is to keep the Skeleton loader as its own separate component and card ( where we will show the data ) as its own component. So, you don't need to use the skeleton card to show the loaded data, we will show that in the card component and we will only use the skeleton loader element/component when we request the data to the server and until the request returns the data, once the data is returned back from the server, then we will use the original card to display the data. Hope this helps.

Collapse
 
alanrmachado profile image
AlanRmachado

Amazing!!

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️ • Edited

Thanks a lot, @alanrmachado πŸ˜„

Collapse
 
jedstroke profile image
Jedidiah Gabriel

Well explained

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️

Thanks for sharing your feedback, @jedstroke πŸ˜„

Collapse
 
pipic1 profile image
Pierre Pic

Great job !

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️

Thanks a lot, @pipic1

Collapse
 
aniket762 profile image
Aniket Pal

Awesome stuff! Would use this instead of the material UI one πŸ”₯

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️

Hey Aniket, Thank you so much for sharing your feedback πŸ˜„

Collapse
 
modelhusband01 profile image
Model Husband πŸ‘‘

I need a help from you how do I put link on the user name "Natalie Rodriguez"
How will I put link on it without showing the Blue layout