Skeleton Loading Components with Animation | React & CSS Examples

preview_player
Показать описание

Learn how to add skeleton loading components with animation to your web app in this React & CSS tutorial. Skeleton loading components are next level UI compared to loading messages and spinners.

🚀 Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

Skeleton Loading Components with Animation

(00:00) Intro
(00:14) Welcome
(00:36) What are Skeleton Loading Components?
(01:04) Starter Code
(01:27) Start json-server & project
(03:17) CSS classes
(06:59) CSS Animation
(08:37) Skeleton component
(10:37) Skeleton post
(12:24) Fill the display with skeletons
(14:58) light and dark modes
(15:38) Checking app functionality

📺 Suggested Videos:

📚 Tutorial References:

Was this Skeleton Loading Components with React & CSS tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#skeleton #loading #react
Рекомендации по теме
Комментарии
Автор

Your tutorials are amazing and actually understandable to beginners.
Thank you.

ajaynegiii
Автор

This course is underrated, its better than paid courses

devkumar
Автор

Can't wait to do it (and struggle, like a lot and still get it done) in angular after understanding it in react.

MrFlakgorilla
Автор

There is always great learning from your lesson sir. This is really better than spinner and even that loading text ❤️

siddiqahmed
Автор

great tutorial, I was looking for this type loader

sakibcoder
Автор

Oh my God Dave!. Just when I was enjoying your swr video, I get to see this too.

Your channel is so valuable, I do hop you get more subscribers!

wplearnonline
Автор

thank you, the almighty "Gandave the Gray"

idunexist
Автор

Interview related topics will be good.

zaidclsn
Автор

Thank you Dave! At Nav.jsx, maybe you should better add disabled prop to titleValue option at line 26 to prevent selection of "Employees" placeholder option. And maybe you could unshift it at line 27, not push.

const titleValue = <option key="opt0" value="0" disabled>Employees</option>
options.unshift(titleValue)

As usual a great tutorial <3

bugraotken
Автор

I love your videos. You videos really help me become a better developer. I have a request to please record and upload advanced typescript concepts playlist

yasirghouri
Автор

Hey, love your videos. I have been learning a lot from your videos. Thanks for making actually. One Request, Can you create 2 branches, 1 contains code without implementation just the boilerplate and 2 one is implemented one.

yashgupta-rsro
Автор

Hi Dave, this is wonderful, exactly what I was looking for. Do you by chance offer paid tutoring services?

travisriegler
Автор

hey man nice work as usual, can you do a next tutorial for beginner to advanced like the mern tutorial that you did, it will be great, you are our savior

ousssika
Автор

Loading Skeletons, beautifully explained. Thanks, Dave.

{2023-01-20}

Pareshbpatel
Автор

Did you used any third-party library for skeleton loading please reply

heartfilterer
Автор

Bro. Why you use extra render method? Like a function? Few days ago I saw a thing this things are not inspectable from profiler.

rayhanislam
Автор

At this point i think youtube is listening to me. This is what i literally came to youtube for today. And your video was recommended. Wtf

DanielClipsTVS
Автор

You seem to be using vite on client, any difference between that and nextjs on client side ?

waleedsharif
Автор

on the github link there is the final code not the starter code !!!!
am I missing something here ?

mhdfirassbarakat
Автор

🔥! This is killer Dave! 💀
( bad joke, i know 😂)

doors