Create Your Own Page Pre-Loader (HTML, CSS & JS) (No-jQuery Needed) - Web Design Tutorial

Link to source code:

Page Loaders like this are a common trend nowadays on websites, especially commercial ones. In this video we look at how to make a custom one from scratch - it's actually quite simple which you'll see as I guide you through it.

It's as simple as creating a wrapper, setting an animation and then triggering the animation with Javascript once the page finishes loading. The best part? It's pure HTML, CSS & Javascript. No jQuery or external libraries are required to achieve this effect.

0:00 Overview
0:32 Adding HTML and images
2:22 Writing the CSS
6:29 Writing the JavaScript
9:05 Wrapping up

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript #css

[andreiburcuta]

Thank you for the video. I searched a whole night. Arround 12 hours, to make a loading animation. And your video saved me.He helped me understand how to do it and it worked. Thx for the video

[kvazaios]

I got payed 25 $ for making this for my dad website, I am gratefull :DD

[gibin]

A lot helpful ! Thank you.
Suggestion : Inside the keyframes fadeout also add z-index = -1. Otherwise, the other elements won't be clickable.

[climentea]

Thank you, just what I was looking for :)
the div covered all the page (couldn't click in the inputs), but the "z-index: -1;" did the trick

[demricbautista]

Finally found a working and easier to understand code, thanks!

[specialeffectsgraphicsdesi]

Hi! This is very well explained. Could you let us know how to add a percentage counter instead of that gif?

[TomasMisura]

Thank you for this video. i am very beginner at front-end and the UX/UI as well so it helps me to improve myself and my projects look much better :)

[joonatontti]

What a great video! Fast, simple and works like a dream! Also like your voice!

[MichaelProstka]

That is a truly superb explanation of how to do this. Thank you so much!

[stabbler]

I just come up with this amazing tutorial today and it has saved my life! thank you!

[zeJunkbox]

This didn't solve what I needed to do, but I liked it anyway because it's a lot simpler than what I did in order to make a loader. I'll be using this method in the future.

[fraganya]

Thanks. Easy to follow and straight forward

[TutunSadhukhan]

straight forward explanation...thank u sir...

[OPGAMER.]

Nice video. Thanks.

Did you can Tell me which theme you are using for your Text Editor..?

[markadam]

I really didn't like the way you explain stuff. But your tutorials awesome and really helpful!!
thanks!

[smith]

Thanks a lot you make me very easy way 😍

[denjand]

Thank you very much for your tutorial. It helps me a lot!

[outofmatrix]

Thank you for this really good tutorial! It helped me a lot :)

[sort_to_see_hidden_comments]

many thanks for sharing.
the only limitation is the square background of the gif file, this is another reason why it's better to work with svg files.
but I don't know how to animate svg files.

[sukantoghosh]

Thanks man. i used it in my project too