Window.onload
How do I make an window.onload?
What is a window.onload? How do you make a window.onload? This script and codes were developed by Larry Geams Parangan on 13 September 2022, Tuesday.
Window.onload - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Window.onload</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="body"> <div id="loading" class="spin-1"></div>
</div>
<div id="content"> <h1>Load Complete!</h1>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Window.onload - Script Codes CSS Codes
body{ margin: 0px; padding: 0px; background: #e74c3c; font-family: 'Lato',sans-serif;
}
h1{ color: #fff; text-align: center; font-weight: 200; margin: 10% auto; font-size: 50px;
}
#content { display: none; }
#body{ position: fixed; background: #00dbff; width: auto; margin: 0px 0px 0px; min-width: 100%; height: auto; min-height: 100%;
}
#loading { cursor: wait; background-color: rgba(0,0,0,0); opacity: .8; border-radius: 50px; margin: 10% auto; animation: loading .5s infinite linear; -moz-animation: loading .5s infinite linear; -webkit-animation: loading .5s infinite linear;
}
.spin-1{ border: 5px solid #fff; border-top: 5px solid rgba(0,0,0,0); border-left: 5px solid rgba(0,0,0,0); width: 30px; height: 30px;
} @keyframes loading { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); };
} @-moz-keyframes loading { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); };
}
@-webkit-keyframes loading { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); };
}
/*font face*/
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
Window.onload - Script Codes JS Codes
function preloader(){ document.getElementById("body").style.display = "none"; document.getElementById("content").style.display = "block";
}//preloader
//remove/comment this one to check the website in loading state
window.onload = preloader;
Developer | Larry Geams Parangan |
Username | larrygeams |
Uploaded | September 13, 2022 |
Rating | 3 |
Size | 2,429 Kb |
Views | 32,384 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Just Flat | 2,261 Kb |
Sortable Task List | 2,972 Kb |
The Android Story | 4,745 Kb |
Pure CSS Checklist Icon | 2,121 Kb |
Image Scale on Hover | 2,781 Kb |
Solution for Long Drop Down Items | 3,127 Kb |
Simple E-Commerce | 2,919 Kb |
Simple Dot Navigation Style | 3,612 Kb |
One Page Navigation | 2,534 Kb |
Button Confirmation | 2,176 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
SVG Basics | HipsterBrown | 1,852 Kb |
Two joint circles - One element | Berdejitendra | 1,704 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Blank Starter | Mhartington | 2,171 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
CSS3 Form | Tusharbandal | 1,836 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!