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:
http://goo.gl/Li2hq2
Finished Source Code:
http://goo.gl/mUQgoH
=======================================================
Have any questions, just comment below in comment section. I will try to respond as soon as possible.
Like share and comment!
Thanks
================Links to other playlists=================
– HTML5 Fundamental Video Tutorials 2016 Playlist
https://goo.gl/WAtFFY
– Three ways to create responsive equal height columns using CSS
https://goo.gl/hJYUn2
– How to create a header navigation with centered logo
https://goo.gl/UI241F
– Creating Responsive Image Gallery using pure css3
https://goo.gl/bZjAVu
============Awesome Videos on CSS3=============
Creating CSS3 Tooltip without using jquery or javascript
https://goo.gl/ah10aw
Styling placeholder text using css3
https://goo.gl/i4CZai
Creating three column responsive layout
https://goo.gl/uj46tI
************************CONTACT and RESOURCES*************
Find all the source codes here:
https://codepen.io/smashtheshell
Follow on Twitter
https://twitter.com/amit4kp
Add on Facebook
https://www.facebook.com/kumaramit24chd
Like Page on Facebook
https://www.facebook.com/smashtheshell
Share this video and Subscribe to this channel for latest updates and web design tips and techniques.
Original source
25 responses to “How to Add CSS3 Preloader using Javascript into Webapge | Youtube CSS3 & JS Preloader Tutorial 2016”
is this very outdated? Keeps giving me JS errors on pretty much all java lines.
@smashtheshell hello, i have a question, how we get the real percent loading of browser? tks
awesome bro
Thank you a lot man
5 Cool CSS Loading Animation You should Check out help on this video
how to code
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
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
thank you 🙂
Your CSS is very beautiful, thanks for the help, now I have some ideas to create mine!
I want to add my own gif instead of css loader.
Please help
Mine just keeps loading infinitely. I don't even have anything to load yet, so I'm confused. Can you help?
Hey, can you please create a video on how to use loader.css and how it works? Thank you.
other solution (running for me) window.addEventListener("DOMContentLoaded",function(){console.log("woohooooo!!!");document.getElementById("overlay").remove()});
wow its amazing.
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";
});
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.
WONDERFUL!
preloader is created and displayed but not stoped even after all contents are loaded
thanks thanks thanks !! õ/
This was very helpfull thanks
Straight to the point, modular code, self descriptive classes and IDs and no Jquery. A++ tutorial
Dude I'm not able to do it I mean I start preload but it stays forever in that overlay no time out
Thank you!!
nice. thank you!
That's the brief, straight to the point, timely efficient content i appreciate the most 😍😍😍 6 minutes, drop the mic, i'm outta here 😎