FULL STACK   ·   UI   ·   UX   ·   GRAPHICS   ·   DEVELOPER   ·   INSTRUCTOR

Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Page Loading Screen Document Preloader Tutorial

Published :
Author :
Adam Khoury
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. <!DOCTYPE html> <html> <head> <style> div#load_screen{ background: #000; opacity: 1; position: fixed; z-index:10; top: 0px; width: 100%; height: 1600px; } div#load_screen > div#loading{ color:#FFF; width:120px; height:24px; margin: 300px auto; } </style> <script> window.addEventListener("load", function(){ var load_screen = document.getElementById("load_screen"); document.body.removeChild(load_screen); }); </script> </head> <body> <div id="load_screen"><div id="loading">loading document</div></div> <!-- Your normal document content lives here --> </body> </html>