Create your own Page Pre-Loader (HTML, CSS & JS) (No-jQuery Needed)


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.

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!



  1. my own pre loader (not a gif) and the page content appears together but i have slow down the network throttle any solution?

  2. I edited the script this way:
    setTimeout(() => {

    const loader = document.querySelector(".loader");

    loader.className += " hidden";

    }, 2000);

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

  4. is it possible to do such preloader for php page? I dont have large images, but php taking a long time to load, unfortunately, this does not work with php

  5. How can I make the gif disappear when its time cycle ends?
    I tried with fadeOut but the gif not disappear completely …
    Help me pls ;(

  6. It is not working for me, it seems like the .gif doesnt react on all the things i put in the .css. I have followed the exact instructions, but for example the background doesn't change to black, altho the z-index is higher then any other item in the code.

  7. Good tutorial, nice and clear direction.

    FYI, you can also use loader.classList.add('hidden') if you want the code to be a little more descriptive.

  8. Im new to Javascript in general, however will this animation work if you run it on other browsers without editing the browser settings??

  9. 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 🙂

  10. Hi! I would like to ask if it's possible to add a small logo on the top of the loader and how to do it? I'm just starting to learn coding. Big Thanks))

  11. It seems to me that the loader's animation time is constant, not sync with the actual time needed for images to load. e.g. when i turn the browser inspector throttle to slow. The loader animation is gone after the one sec assigned to it. solution?

  12. If I make my own 3d pre-loader gif in say, cinema4d, am I able to use that instead of the regular dotted circle?

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


Please enter your comment!
Please enter your name here