Create a Beautiful Preloader Animation in WordPress with Motion.page

Hi guys, Luke here, back with another quick tutorial. Today, this has been a highly requested video, and it is basically how to make the page loader that we have on the main Motion Page website. I'll just be making a quick video today showing you how you can create something very similar. So, this is what it looks like. This is what the page loader looks like on the Motion Page website. So here it is. As you can see, we have basically little loaders coming from the middle, and then we have a top section and a bottom section, and they basically translate on the y-axis, revealing the website. So, let's go ahead and create something very similar.

Once again, guys, I will be using Oxygen Builder for this. That's just the builder that I'm the most familiar with. I've already created a basic home page, so I'm just going to click on 'Edit with Oxygen.' Since I only want the page loader to happen on the home page, the home page is where I'll create the elements for the animation. So, what we'll need first is a div, and this will act as our wrapper for the whole thing. I'll put this to the top and I'll call this 'Loader Wrapper.' I'm also going to change the IDs here so that I can tag them easily in Motion Page. Loader Wrapper. For the layout, I want this to span across the whole page, so I'm going to use a fixed position, and I'm going to change all the values to zero here. Also, the Z-index, or the Z-index, I'm going to change this to a higher number just so I know that it's going to be loading on top. So, I'm just going to use a thousand, just in case, because some headers with the menus have a quite a high Z-index. So, just make sure this is quite a high value. Save that.

So now, within this loader wrapper, we want two sections. So, I'm just going to focus on the top one for now, and then we'll duplicate this later. So, top loader section, and I'm also going to change the ID once again. I'm just going to call this one 'Top Loader.' So, the top loader wants to be 50 viewport height, so it's just halfway down. So, let's go here, height, viewport height, 50, and then we want this to span at 100% width, like that. I'm just going to change the background so I can see what's happening. Let's make it something dark. So, if I change, once again, the Z-index here, if I remove it, you can see that you can actually see the loader. So, just make sure that this is of quite a high value.

Now, inside here, we want to make the little gradient bars come from the middle. So, let's just create that first. So, I'm going to create another div inside here. I want to position this to the very bottom, in the center. So, what I'm going to do for this one is position absolute, but before we do that, on the parent, let's just make this relative. Okay, call this 'Top Loader Bar,' and then we'll do that here as well, 'Top Loader Bar,' like that. Okay, so let's position it. We'll go to layout, absolute, and we want this to be at the very bottom, zero like that. On the parent, I'm just going to center everything like that. And now let's give this some height, a height of one pixel, minimum height, max height one. The width for the starting point, we want it to be zero, but I just want to see what's happening, so I'm just going to change these values a little bit for now. The width is going to be, let's just do 50 pixels so I can see, and I'm going to give it a gradient. I'm going to use three colors, and I'm going to use Motion Page's colors here, so we'll do MP pink, MP blue, and MP Motion Page green. So, they are the colors of Motion Page. The angle is going to be 90 so it goes from pink to green like that. That looks good.

So now, let's just split these values back. So the width wants to be zero pixels, one, one, one. So now, I'm going to duplicate this top loader section to act as our bottom loader section. I'm going to change the IDs as well, so this one was 'top loader,' this will be 'bottom loader,' 'bottom loader bar.' This just makes it easier for me to target in Motion Page; that's the only reason I'm changing the IDs here. And we just need to change the layout position here. So, we'll do 'top zero' like that.

Okay, finally, what I'm going to do is I'm just going to change the background gradients for the main sections here, just to give them a little gradient, make them look a little bit better. So, for the top, I'll use kind of a lighter one, and then here, put that to 90. And then for this one, we'll do the opposite effect. Let's go gradient, two colors; we'll make the bottom one lighter, the top one darker. All right, cool. Let me save this, and I'm editing in Motion Page. I just want to see what everything looks like over in Motion Page now. So, I'll click on Motion Page.

All right, I'm going to create a new timeline here. I'm going to call this 'Homepage,' load up. We want this to happen on page load and preferably before load. So what we want to do first is we want the gradients to load in. So let's just target the top one for now. So we'll go back here and just grab the ID, press enter. All right, so you can see it's highlighting it there. Remember, its width at the moment is zero pixels, so we want it to be zero pixels on load, so we don't need to change anything here. But on the two, we want to go to dimensions 100. So, as you can see, that's loading in quite nicely. Let's duplicate that, and we'll target the bottom one as well. So, let's remove that one, and then we change this to 'bottom,' press enter.

So as you can see, we're having an issue here, which is, well, it's not really a tiny problem; this would be a huge problem. You can't actually see the bottom one now. The fix for this is changing the values in size and spacing. What you want to do is make it 2, 2, 1, so the max height is still going to be one; it's never going to exceed one pixel. All right, so that's working now. The line's a little bit thicker because it's technically two pixels, top and bottom, one pixel each. So what we want to do once this is finished, we then want to start a new animation node. So let's start it here, which is perfect. I'm just going to move this up a little bit. We want to target this top section here, and we want to animate it. So we'll translate it on the y-axis, and we'll give it a value of minus 100. It's going to move up. So let's target that. That will be 'top loader.' Just make sure 'hover' is off. Yeah, 'from' is fine, 'to' is 'translate on the y-axis 100.' There we go. So once this is finished loading, that thing is going to move up. And then we'll just do the same for the bottom loader. So, duplicate that, target the bottom loader, get rid of the top loader, and then this wants to be positive 100.

It's a little bit slower than the Motion Page website. So all we can do for that is just make these nodes a little bit shorter, like half a second. We don't want the loader to be too long. All right, looks pretty good. The last thing I'm going to do is I'm just going to grab the Motion Page logo in Oxygen Builder. I just want to add it into the top section here. So I'm just going to do 'Basic,' 'Image,' I'm going to paste it in there. Width, I'm going to do 250. Give it a margin, 'auto' here and here so it's just in the center. All right, and that's it. So let's see what it looks like on the front. I want to save my timeline here in Motion Page and then refresh this. Perfect.

Now, if you want to add a slight delay, all you can do is just move everything forward a little bit. So let's say after almost half a second, not quite but almost half a second, so you'll see a slight pause on page load and then the animation will start like that. Now, we do have one tiny problem, which is, well, it's not really a tiny problem; this would be a huge problem. You can't actually click on any elements, and that's because our loader wrapper is still in place. Everything inside of the wrapper has moved out of the way, but the loader app is still in the way. So what I'm clicking on here is actually the loader wrapper. So a very easy fix for that is after everything's loaded and finished. So here, we'll add a new node. We can make this really short. And then we'll just target our loader wrapper. Let's 'loader wrapper.' So I guess there's two ways you could fix this. The way that I would use, I would just use a custom property using pointer events and make sure you're on the two timelines here, 'pointer events none.' So what that's going to do is after everything's finished, the main wrapper that's containing everything, you'll be able to essentially click through it. So I've saved that, refreshed this now.

So now you can't really see it, but the wrapper now is, you can click through it because of the pointer events being none. An alternative method is, instead of using pointer events, you could just use translate. You could translate on the x-axis. I'd recommend x because technically, you still have a top section here and a bottom section here. So, I would then translate it to the left, like negative 200 pixels, percent, sorry, not pixels. So, you'll not see anything, but what's happening here, that's finished, and then it's all just moved off to the left side. Okay, so then you can click the elements. But I think the way I would do this is using a pointer event, personal preference. So instead of that, I'm going to change this back to pointer events none, refresh, just make sure that's working. Okay, perfect. So once again, this is Motion Page's example.

And our example, very similar, but yes, there you go. So there you have it, guys, just a very quick tutorial on how to make that page loader. It was once again a very highly requested video, so I thought I'd just make a quick tutorial on how to make it. Also, with everything that you've learned in this video, you could create different styles. So instead of using sections on top of each other, you could also put them side by side, and then you could translate on the y-axis to move them left and right. But the choice is yours. Don't forget to like and subscribe, and we will be back with more videos every Monday. Thank you very much. [Music]