React Skeleton Screen Tutorial #7 - Animations

Key Takeaways

all right again so there's one more thing i want to do with these different skeleton screen components and that is to add a bit of a shimmer a bit of an animation effect so it's like light passing as the data is loading so to do that we're going to use css animations so don't worry if you don't know much about css animations it is going to be quite a simple one but if you do want to learn more again i've got a whole video tutorial series on this very channel all about css animations and i'll leave the link to that down below but anyway let's create this kind of shimmer effect for these different components so to begin with i'm going to create a shimmer component and we'll call that shimmer.js so inside here i'm just going to paste in a component because it's very simple and it's called shimmer it returns a very simple template which is a div with the class name of shimmer wrapper and then a div inside called shimmer now the way this is going to work is that this div is going to be placed inside either our skeleton article or skeleton profile inside the wrapper like here or maybe at the bottom down here it doesn't really matter and it's going to be positioned absolutely relative to this okay so it's going to start in the top left and it's going to go all the way to the right and all the way to the bottom it's going to take up the full width and height of whatever skeleton component article or profile we put it in right that's the shimmer wrapper so this shimmer thing right here that will then be the thing the light that kind of goes all the way across this parent right here and it's going to be about 50 of the width of his parent so it's going to go all the way from the left through the component and off the screen to the right okay so that's the way we're going to work this it might sound a bit complicated but it's really not that complex i'm going to save this and i'm going to embed this shimmer into the skeleton article and we'll do that at the bottom below this div right here because it's not inside the article it's just inside the wrapper so let's do this shimmer right here so now we need to style this up and create the css animations so let me do a little comment down here which says animation effect and below that i want to first of all say shimmer hyphen wrapper and that's the wrapper right here remember this thing and we want to position that as absolute so position absolute now in order to position it absolutely to the parent which is if we take a look inside skeleton article the skeleton wrapper this must have a position of relative so we need to go back up to the skeleton wrapper and say position is going to be relative okay so then the shimmer wrapper also needs to be from the top zero pixels and the left zero pixel so it starts in the top left this element the width of it is going to be 100 so it goes all the way across the parent all the way across the skeleton article and the height is going to be 100 of the skeleton article or whatever or the skeleton component replacing like the skeleton profile so that's the shimmer wrapper now i want to style up the shimmer div right here in itself and that's the thing that's going to actually have the kind of glow the thing that we see moving from the left to the right so let's do that below here we'll say shimmer and i'm going to say the width of this will be 50 so 50 of the wrapper and then we're going to give this a height of 100 so it takes up the full height of the skeleton component then i'm going to give this a background which is white but semi-transparent so it basically just lightens everything up so the background will be rgba and the a's for the alpha channel five five two five five two five five which is white and then i'm gonna give this an opacity of 0.2 so it's only slightly transparent okay okay i also want to transform this by giving it a skew so it's kind of angled to the right so skew in the x direction and we'll do that by minus 20 degrees okay so what i'm going to do is save this and i'm going to refresh over here to see if we can see you see that light the left hand side is a bit lighter than the right hand side what i'm going to do is increase this number right here to about 0.8 so you can see that more clearly save it and refresh and we can see the left hand side has this kind of shimmer diff right now what i want to do is scoot that all the way from off the component to the left so it's hidden all the way over to the right so it's hidden again and i want to do that maybe every two seconds or something like that so in order to do that we're not actually going to animate this we're going to animate this right this is the thing that's going to go from left to right so how exactly are we going to do this well first of all let's create a keyframes animation down here so we'll say keyframes and we're going to call it loading you can call it what you want but i'm calling this animation loading and then at zero percent so that means at the very start of the animation i want to have a transform property where we're going to translate the x coordinate and it's going to be minus 150 percent and that basically means take 150 percent of your own width and move that amount to the left so that means it's going to be way over to the left over here okay so you can't see in the component itself so that's where it's going to start way over to the left now at 50 so halfway through the animation i want to take that transform and i want to translate x again and this time it's going to be at minus 60 so by this time halfway through it's moved to just before just before the start of it over here okay so we can probably just about see the tip of it and then at 100 i want it to be way over to the right so 100 percent i'm going to say transform and it's going to be translate x again and this time it's going to be by plus 150 so it's going to go way off off the components way over to the right so it's going to animate from way over here all the way across the right okay so we should see this go all the way over to the right now what i'm going to do is come over here and apply the animation to the shimmer wrapper so animation is going to be the loading one that was the name of the keyframes animation and then it's going to last 2.5 seconds and i want it to repeat infinitely so we'll say infinite right here so if i save this and cross my fingers hopefully we should see this kind of work there are going to be problems so don't worry um watch this and we can see it go all the way across the only problem is you kind of see it as well if i make this about 0.2 which it should be you'll see it in other parts of the screen as well well you don't really see it because the background is white but if i go to the body at the top if i do a rule for body and say background is going to be 333 so a dark gray if i save this now watch the sheen go off the skeleton components you see like that we can see and we don't want that so we want the overflow of the skeleton wrapper to be hidden so that we don't see it while it's outside of the skeleton wrapper so we'll say overflow hidden for that and if i save it now and refresh we shouldn't see outside of the skeletons we can just kind of see that sheen going across now okay all right so we can take off that background and go back to a white background take another look refresh and this should look okay but i want to soften up the edges of the sheen if i go down here again and make the opacity 0.8 so we can see it more we can see very hard edges to the sheen right now i want to soften those up a little bit so in order to do that i'm going to give this a box shadow so box shadow and it's going to be 0 0 30 pixels 30 pixels and then rgba it's gonna be two five five two five five two five five which is white and then 0.05 for the opacity so that is just going to put a bit of a blur on the edges so it doesn't look as harsh and if i refresh this it's a subtle effect but hopefully you should see that the edges are slightly softer now okay if you want you can take off the animation and see that for yourself okay so there's one more thing i want to do because this looks okay for the light theme in fact let's knock this back down to not .2 save it preview again this looks okay for this light theme right here but if i change one of these to the dark theme it's not quite gonna look okay let me go to articles and change the theme to be equal to dark save it and refresh and it's going to look slightly too light that sheen so i'm going to change it when we have a dark theme so let me go to the css again and say this time i want dark shimmer so when we have the dark class applied as a parent in the wrapper at that point i want to change the background of this sheen and it's gonna be rgb a again it's still gonna be white so two five five two five five and two five five but this time the opacity is gonna be 0.05 so it's not going to be as bright and if i save that now and refresh this should look a little bit better yep looks a bit more subtle so there we go that's a simple little sheen that we can add to our different skeleton components there's loads of different ways of doing this if you search google you're going to probably find about 101 different ways or you can make your own up as well if you want help with that using css animations definitely check out that tutorial series on this youtube channel the link is going to be down below but that my friends is the end of this series so hopefully now you know how to create skeleton components for your react applications and you can do the same kind of thing using things like vue or angular as well so then my friends i really really hope you've enjoyed this series and if you have enjoyed it please don't forget to share subscribe and like that really means a lot and it helps out an enormous amount and if you do want to join the course and support the channel you can do by clicking the join button on the channel home page or underneath the video or right down below you also get a little cool ninja badge next to your name in the comments for that and it's 99 pence or cents per month and i've also created several premium in-depth courses on udemy so the first one is modern javascript the second one is d3 and firebase and the third one is vue.js and firebase so if you want to take one of those all the links with the discounts automatically applied to them are going to be in the video description down below so again thanks so much for watching and i'm going to see you in the very next course [Music] you