Page Loading Screen Document Preloader Tutorial JavaScript CSS HTML

Learn how to apply a loading screen overlay to your web pages and documents using HTML, CSS and JavaScript. I will just demonstrate something simple that you guys can expand upon if interested. You can choose to add animated preloader graphics, but make sure they are extremely fast loading so they show up instantly.

[paulm.]

This is the most intuitive way I've seen someone present this idea so far. I've been tinkering with doing set times for how long the loading animation will run before fading out, but this doesn't work very well when the load times differ from page to page. This just removes the loading element right after the page is done loading.. SUPAH SMAHT. Definitely using this method from now on.

[elserg]

probably the easiest most helpful video I've seen on a loader, everyone knows how to make spinny things, I just didnt know how to actually implement one. thanks a lot.

[JeremyRobertWalker]

Best tutorials on YouTube, hands down, mad props sir

[geektutorialz]

Other tutorials, are not as good as this, because they just add a jQuery function and that's it. This method is really understandable. Thank you and keep up :-)

[OnlyInAfrika]

You my friend just saved my life... thank you much!!!

[saifuddinmakati]

thank you so much adam! You solved a major problem in the simplest of code

[SimPwear]

Too damn good! Simple, clean and working.

[pbl]

Thanks! Really best method I ever see to solve a loading screen.

[RidaHallal]

thanks man, epic tutes, greetings from lebanon

[laureen]

i got it worked but i have one tiny problem...
i want to have it a smooth fadeout effect
what will i add?

[YannisStarwalker]

Nice and easy to understand, Thank you, Sir!!!

[peterm.souzajr.]

im using this too, im basically the next adam khoury, except with more hair

[yassiamy]

Nice and simple approach, i guess we can use it with videos also .
when they are loading on the page .

[MrQwerty]

quick tip: you can make the height: 100vh. This will be the size of the monitor you view the website on.

[NielsKersic]

Hey,
I copied you exact code, but it doesn't work. The only thing I changed is that I used a gif instead of the plain text

[remixowlz]

LOL THE INTRO I LAUGHED OUT LOUD DURING MY LECTURE CLASS XDDD

[Knards]

Never thought of that. But I guess thats why you make the big bucks!

[vipulsingh]

adam how to set time out for a loader plz help me

[ronniej]

I am not sure why but most of my questions are answered by your different tutorials. If the JavaScript is disabled I assume that the main page will not show, what alternatives we can do to fix it, do I just need to put a <noscript> to remind the users to enable it before accessing the page or can we just disable the loading_screen element. I'll wait for the response. Thank you for this great tutorial.

[nikhiljain]

hello sir
i m new to html and i am creating my first website .
Now the problem is that i have designed a homepage, a loader page and then page 2. now what i want is after homepage the loader page should come on screen for 1-2 seconds and then automatically page 2 should come as you have shown in your tutorial.But as page 2 contains contains only a simple background and plain text so loader never comes on screen or it comes for some milli seconds . so now what should i do to make loader visible on screen atleast for 1-2 sec