Coding Fun Html Page Loading Screen Document Preloader Tutorial JavaScript CSS HTML

Page Loading Screen Document Preloader Tutorial JavaScript CSS HTML





Lesson Code:
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.

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

45 thoughts on “Page Loading Screen Document Preloader Tutorial JavaScript CSS HTML”

  1. where to place tha index.php file

  2. Ahadul Islam says:

    but what happen if javascript disable, people cant access your website

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

  4. Laureen Jill says:

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

  5. Vishnu Das says:

    load only for the first page load how

  6. Its usefull for making a Awsome website

  7. Medoo says:

    Omg i thought it was alot harder

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

  9. Hi Adam, awesome video my friend. I have a question. Could you please tell me how to make it so that the loading screen only goes away when someone clicks a button. I don't want it to go away automatically. Thanks in advance

  10. it's activated when our website is live?

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

  12. nice tutorial but i am facing 1 problem only preloader will display not the page which we are going

  13. Fabian says:

    Think this channel is inactive, but if sb know how to make an loader for BACKGROUND-images, I would appreciate it if sb could give me a link or an explanation 😀 And I heard of sth in jpg images, that they load the image first pixelated and slow gets a better resolution

  14. Josh Dade says:

    you sound like comic book guy

  15. Nikhil Jain says:

    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

  16. i cant add this preloader in my work what im going to do?

  17. thank you sooo much!! I needed this code snipped. thumbs up!!

  18. Michael says:

    Hey i have tried to make just an image show up for like 5 seconds when i load my website with some text over it.. Kind of like an "opening scene" kind of thing. I want it to go away after the 5 seconds so how can i do that?

    I used the code you gave here but the image goes away so fast that you cant even see it i think..

  19. pattn says:

    +Adam Khoury could yo help me to center the loader vertical AND responsive?

  20. how can you set the loading time? ;o

  21. Vipul Singh says:

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

  22. Hi Adam I tried this out and it worked great but only for my index page the others wont remove the element after load, what could be the the problem? thanks.

  23. Any idea how to do it using JQuery.

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

  25. AutoPilot69 says:

    Very helpful mate. Many thanks!

  26. TheLy Beats says:

    Counter strike: source. Can i use this for Gmod ?

  27. Paul M. says:

    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.

  28. Paul M. says:

    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.

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

  30. SgtGo says:

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

  31. sunil kumar says:

    how to share my docs

  32. sunil kumar says:

    this is not working for me

  33. Voyd Naught says:

    Nice one dude, thank you!

  34. Matt Bland says:

    thank you

      SSSS            OOO                      M             M        U           U              CCCC        H           H
    S         S       O       O                    M M     M  M       U            U         C            C     H           H
        S            O           O                  M     M      M       U            U         C                   HHHHHHH
            S        O           O                  M              M       U            U         C                   H           H
    S         S      O        O                   M               M       U           U          C           C     H            H
      SSSS           OOO                      M               M          UUUU                 CCCC        H            H

  35. Dan Hebbard says:

    Thanks man, it worked ^_^

  36. Niels Kersic says:

    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

Leave a Reply

Your email address will not be published. Required fields are marked *