We're celebrating a new year and new skills, by offering a 21% discount off all courses and collections at checkout! ✨
January 9th 2018
- [Instructor] Today, what we're gonna do is adda loading screen to a site that looks like this.Now, I've just made a quick site using Brooke Lark's photos.Brooke Lark is the number one editorial photographerof the year on unsplash.com.You can use her photos for freeas long as we give her credit.Now, what we're gonna try and do is make loader that lookssomething like this.Now, this is 10xbanking.com.If I refresh the page,we'll get this loading screen that fades out.I can see another example on artandmotion.com.This is the usual site, but if I refresh,we'll get this kind of pre-loader that loads in,and loads into the site, and looks like this.So, we're gonna do something very similar.Ours is gonna be quite basic,it's just gonna be a simple image that kind of rotates.Now, what we're gonna do iswe need to cover up this entire page with a loader.Now, at the moment my HTML looks something like this.I just got a simple header, and I've got a sectionwith six image tags in there.What we're gonna do is quickly, at the top of the page,because we want our loaderto be the first thing that loads in,is I'm just gonna add a tag.Now, I'm gonna give this a class of loading,cause it's kind of a loader.Now, I've already made an image to load into.Now, I did this on Sketch, simply just four circlesand a rectangle to kind of cut these off,so I kind of just have the circle,and the internal circle that you just subtract,and just made it, and exported it out as an SVG.Now, I've got it on my desktop right now.I'm just gonna add it to my project.Now, in my loader, I'm just gonna add an tag in here.And this is gonna have the source of loader.svg.Now, SVG is just a scalable vector graphic,we can make it as big or as small as we likeand it doesn't pixellate.If I look at this right now on my site,I'll just kind of have this imagethat kind of looks under the header.Now, even though I've done my header below,the header is actually fixedas we scroll up and down the page.So, we want this to kind of fill the entire page.I've got with a class of loading,let's make it fill the page.Now, my style sheet, what we're gonna do is underneath body,I'm gonna do it between body and header.Just gonna add a with loading,with a class of loading,and I need this to fill the entire page.I'm gonna make it position: fixed,because we want to see any point on the page.We're gonna attach it to the top at zero,and the left at zero.We're gonna make it have a width of 100% of the page,and also height of 100% of the page as well.So, what this will look like at the momentis something that looks like that.We've kind of taken it out of the context of the usual page,and they say taken it out.Now, what I'm gonna do is give it a background as well,so this background color is going to be the white.So, #FFFFFF, let's give it a white color.Now, you might notice that the header is above this,because further down in our CSS,our header is fixed as well.This is a z-index of one.Now, by default, a z-index is a zero.
Now, you might notice there's a little error in our editor.We're gonna fix that in a minute.What we're gonna do is we're gonna transform this,and we're gonna start the rotation at zero degrees.And at 100%, we're gonna turn it all the way around,so we're gonna transform this to rotate to 360 degrees.
So, we're going around in a circle.Now, we've made an animation,but we haven't applied it to anything at the moment.So, what we're gonna do further down is select the thingthat we want to turn around.Now, in my index.html, I want this image to spin around.So, this image that's insidethe with the class of loading.So, in my CSS, I'm just gonna go down to underneath here.
My with a class of loading has an image inside it,and we want to animate this,so we're gonna add an animation.What animation?Well, above, I called it my keyframes rotate,so we're gonna keep it the same.
Well, we need to do something on the page itself,we need to do something on the document.What do you want to find?Well, basically my HTML I want to find thiswith class of loading and basically get rid of it.So I need to select this, so I'm gonna do .queryand then capital S, selector.
So this basically does something as if it was CSS.So in here, I can do some quotes and say .loadingto pick the loading .Now this could be div.loading as well.If you want to make it more explicitly clear.Now what do you want to do?We want to fade this out, we want to change the styleof how this looks.Now, because we want to change the style,what I'm gonna do is add another class.Now I need to go back just quickly to my start sheet.What I want to do is in my div.loading, which is this bit,not the image, I want to fade this out.If I add a class to this as well, so maybe I want to dodiv.loading but when it's hidden.
January 9th 2018