How to Add a Simple Loading Screen to Your Site

- [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.

We need it to be above the header,so our z-index is going to be, what's more than one?Well, two.So, now, this will be above.Now, within this whole section,now, notice the whole area is white.I could change that color to be something else,maybe kind of like, pink color,if I wanted something that looks pretty terrible,but you can see it fills the entire page.Let's just turn that back to whitebefore our eyes get any more pain.What we need to do is make this imagein the middle of the whole .Now, what we're gonna dois actually something pretty simple.We're just gonna use display: flex, using flex box.We're going to move this into the middle.We're gonna say, justify the content of the entire loaderto be in the center,which at the moment, we'll make it in the middle.And we can just definitely make sure this,you know, we want to definitely make sure it's in the middleif I say, two ways, we put it one way.Align items in the center too.Now, we can change this to be something different.If we wanted it to be in the top left,we can kind of add a padding to it.The top right, we can add some text align.So, we can do a few different things.Now, we've got this appearing above the entire page.How do we make this image spin around?Well, there's a few ways we could do this.We could use some JavaScript,but this thing's built in to CSS that lets us do this.CSS animation.What we're gonna add in our CSS, if I just go back,is towards the top of the page,I'm gonna add in an @keyframes.Now, the name of my animation, I'm gonna call rotate.This could be called anything.It could be loading, for instance.And we're gonna do some curly brackets.I'm gonna start at 0%.

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.

How quickly do you want it to rotate?Well, I want it to be maybe two seconds to S.I want it to loop at all times because I might want thisto show up for 10 seconds, so I want this to bean infinite animation, so it goes around all the time,not just once, and also I want it to be a linear animation,I don't want it to have any easingso it looks constantly looping, so linear as well.Now if I look at this now, what we'll getis something that spins around.Now the only issue that we have next is thiswill stay there.How do you make this disappear?Well, we can't do this in CSS, we actually have to addsome JavaScript, so after three seconds or four seconds,we want this to fade away.What we're gonna do is I'm just gonna go back to my editorand we're gonna add in, just click, we're gonna adda new script.I'm gonna call this one loading.js.Now, I need to add this to my page somewhere,so in my index HTML, maybe towards the bottom of the page.My script, tag, gonna have a source that equals loading.js.

Now at the moment, nothing in loading.js.So it's completely empty.What I'm gonna do actually is I'm not gonna useany kind of libraries, no Jequery for this,I'm just gonna do it in pure vanilla JavaScript.What we're gonna do is find somewhere on the page,just load a fade out after three seconds.So I need to do this in the other way around.After three seconds, I want to do something,so after three seconds, do something.Now this could be anything, it could be some kindof animation, it could be don't fade it away,do something else, but to do something after an amountof time in JavaScript, we're gonna use something called setand then timeout.So notice there's a capital T in timeout there as well.So to run this, we're gonna use some round brackets,and what do we want to do inside here?We want to do something.Whenever we do something, we run a function, so I'mgonna write function, round brackets, curly brackets.Now there's another thing that gets into set timer.The thing we want to do and where we want to do it,so after this curly bracket, I'm gonna do a commaand I need to tell it how long.Now JavaScript uses milliseconds, so what we're gonnais say three seconds is three thousand milliseconds.

So after three thousand milliseconds, do something.Now to make this easier to read, I'm just gonna gobetween my curly brackets and open them up.Now this doesn't do anything different, it just meansthe (mumbles) is a little bit clearer about what this does.Now we need to write some JavaScript to do somethingon the page.

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.

Now, you might get a sad face here because it technicallyisn't in HTML, we're gonna add this with JavaScript.But what we want to do is say the opacity is zero.

So when we want to hide this, change the opacity to zero,now we want to do this after three seconds,so in my loading, after three seconds, find the divwith the class of loading and then add a class to it.Now to do this with pure vanilla JavaScript, we say.classList, notice the capital L, .add,and what we want to do, add hidden to the class list.It's not .hidden, it's just the word "hidden."What we're doing is after three seconds,just hiding this away, so if I go to my editorright now and I press refresh, we'll see one, two, three,and it'll disappear.Now because we're doing this in CSS, we can actuallyadd some styling to this as well.So my style.css, what I'm gonna do is sayI want to add the transition, div.loading,and any kind of way, if I fade it in, if I fade it out,I want to change the opacity.So below here, I'm just gonna add a transition.So the opacity will be how long do we wantto fade it out of?

Maybe a second, let's say, so after three seconds,fade this out to zero.But fade it out not just instantly, so if I havea quick check now, and if I refresh, so I've got one, two,three, and it'll fade out.Now the one thing you might notice is you can't selectanything on this page anymore.The reason for that is because we still have the loaderthere, we just can't see it.So the one thing I'm gonna quickly add is if there'sno editor, if there's no loading screen, it's hidden,basically ignore it.Make my mouse or whatever I'm using if I'm using an iPhoneignore the loader itself.So to do this, I'm just gonna add one more thing in herecalled a pointer event which is can my mouse point it,do anything with it, and add none to it.So this isn't clickable, it doesn't obscurethe mouse anymore.So I can do now is if I go back to my site, I refresh,I can't click anything underneath, notice I justselected the image, but now it totally ignores this.So this is how you can add a quick loader onto our site.All we've done is add some HTML that says we've gota with a class of loading.We've added some style to it to say show it aboveeverything else, and then spin it around, and whenwe want to do something with JavaScript, fade it out.And then in the JavaScript, what we've done is sayafter three seconds, pick the class loadingand add a new class to it.So that's how you add a very, very simple loaderto your site.