• Tuesday , 5 December 2017

How to Add CSS3 Preloader using Javascript into Webapge | Youtube CSS3 & JS Preloader Tutorial 2016

Code Canyon

How to Add CSS3 Preloader using Javascript into Webapge | Youtube CSS3 & JS Preloader Tutorial 2016

Learn to add css3 preloader animation in your website using pure javascript (js) without jquery. The css3 Circular preloader animation that we are going to use in this video to add using javascript (js) into site has been already taught in the another video title on “How to create circular loading spinner animation or document preloader using pure css3”.
Learn to create pure css preloader: https://goo.gl/y7i66n
I encourage you to watch this CSS3 Preloader Animation video before watching how to integrate it with javascript! if you haven’t watched yet!

By the end of this tutorial you will have understanding of adding css3 preloader to you site.

==============Navigate to specific portion===================

00:35 | Creating overlay for the css3 preloader (loading screen animation)
02:36 | Adding document loading screen animation effect using javascript into your website
5:17 | Javascript Preloader final look

***********************IMPORTANT NOTE***********************
This html and css3 page loading screen animation is very simple to understand and can be understood by even a very beginner who has just started learning javascript or css. The beauty of this method is that you can also replace css spinner div cricular preloader that is demonstrated in this example with your your gif preloader animation, then you can use the same javascript code to integrate your gif loading animation file within your webpage.

===============Try Using SOURCE CODE================
Starting Source Code:

Finished Source Code:

Have any questions, just comment below in comment section. I will try to respond as soon as possible.

Like share and comment!

================Links to other playlists=================

– HTML5 Fundamental Video Tutorials 2016 Playlist

– Three ways to create responsive equal height columns using CSS

– How to create a header navigation with centered logo

– Creating Responsive Image Gallery using pure css3

============Awesome Videos on CSS3=============

Creating CSS3 Tooltip without using jquery or javascript

Styling placeholder text using css3

Creating three column responsive layout

************************CONTACT and RESOURCES*************
Find all the source codes here:

Follow on Twitter

Add on Facebook

Like Page on Facebook

Share this video and Subscribe to this channel for latest updates and web design tips and techniques.

Original source

3d Ocean

Related Posts


  1. Gusten
    October 11, 2017 at 23:08

    is this very outdated? Keeps giving me JS errors on pretty much all java lines.

  2. Just for code
    October 11, 2017 at 23:08

    @smashtheshell hello, i have a question, how we get the real percent loading of browser? tks

  3. All About Computers
    October 11, 2017 at 23:08

    awesome bro

  4. ahmetomer
    October 11, 2017 at 23:08

    Thank you a lot man

  5. shiv maurya
    October 11, 2017 at 23:08

    5 Cool CSS Loading Animation You should Check out help on this video
    how to code

  6. Mostafa HaNy
    October 11, 2017 at 23:08

    Hi im using ADOBE Dreamweaver CC 2017 and i have followed your steps but when i download your code from code pen and remove your YouTube code and but my web page code it doesn't work !!!
    Please i need help from you

  7. MrHelpless
    October 11, 2017 at 23:08

    Hey, the loading screen works but doesn't stoped after loading all things.
    Screen "javascript": http://prntscr.com/g7ad4z
    Screen "css": http://prntscr.com/g7adpq
    Screen "Chrom Error Console": http://prntscr.com/g7atc0
    Please Help.
    Nice Video

  8. Arun Shetty
    October 11, 2017 at 23:08

    thank you 🙂

  9. Tomoki Sakurai
    October 11, 2017 at 23:08

    Your CSS is very beautiful, thanks for the help, now I have some ideas to create mine!

    October 11, 2017 at 23:08

    I want to add my own gif instead of css loader.
    Please help

  11. Vanse Harris
    October 11, 2017 at 23:08

    Mine just keeps loading infinitely. I don't even have anything to load yet, so I'm confused. Can you help?

  12. Ahmed Kabir Maruf
    October 11, 2017 at 23:08

    Hey, can you please create a video on how to use loader.css and how it works? Thank you.

  13. Betty
    October 11, 2017 at 23:08

    other solution (running for me) window.addEventListener("DOMContentLoaded",function(){console.log("woohooooo!!!");document.getElementById("overlay").remove()});

  14. Deepak Bhatt
    October 11, 2017 at 23:08

    wow its amazing.

  15. matijaleader1
    October 11, 2017 at 23:08

    i did the exact same thing you did and i got the following error: "Uncaught TypeError: Cannot read property 'style' of null" :(((
    this is the javascript code i have:
    var overlay = document.getElementById("overlay");
    window.addEventListener('load', function () {
    overlay.style.display = "none";

  16. Kingston Penaflor
    October 11, 2017 at 23:08

    I cant find a solution for my problem. 🙁
    My problem is that when I add the preloader in my website. Its working, but the other contents display at the same time. Specifically when I add transitions with delay. Please answer my question. Thank You.

  17. Poohbie
    October 11, 2017 at 23:08


    October 11, 2017 at 23:08

    preloader is created and displayed but not stoped even after all contents are loaded

  19. Naiguel Developer
    October 11, 2017 at 23:08

    thanks thanks thanks !! õ/

  20. Hardik Savaliya
    October 11, 2017 at 23:08

    This was very helpfull thanks

  21. JulianGarciaVEV0
    October 11, 2017 at 23:08

    Straight to the point, modular code, self descriptive classes and IDs and no Jquery. A++ tutorial

  22. Solo Trench
    October 11, 2017 at 23:08

    Dude I'm not able to do it I mean I start preload but it stays forever in that overlay no time out

  23. Wind Edits
    October 11, 2017 at 23:08

    Thank you!!

  24. Teiny Arts
    October 11, 2017 at 23:08

    nice. thank you!

  25. MisterJoeyJoeJoe
    October 11, 2017 at 23:08

    That's the brief, straight to the point, timely efficient content i appreciate the most 😍😍😍 6 minutes, drop the mic, i'm outta here 😎

Leave A Comment

You must be logged in to post a comment.