loading page by window.onload

In this example below you will see how to do a loading page by window.onload with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by HelloLeeChan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright HelloLeeChan ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>loading page by window.onload</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="loader">
<div class="loader-content">
    <img src="http://i3.tietuku.com/997c27fdf4ce259b.gif" alt="Loader" class="loader-loader" />
</div>
</div>

<div class="content">
  content
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/HelloLeeChan/loading-page-by-windowonload-NqJxoO */
@charset "UTF-8";
.fadeout {
	opacity: 0;
	filter: alpha(opacity=0);
}
.loader {
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background: #000;
	text-align: center;
	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
	transition: opacity 1s ease;
}

.loader-content {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPYAAABLCAMAAAB0mIpRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ3MEVEQkVGMzhGNDExRTU4OUQ2OTZGRTIxQ0U2OUI2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQ3MEVEQkYwMzhGNDExRTU4OUQ2OTZGRTIxQ0U2OUI2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDcwRURCRUQzOEY0MTFFNTg5RDY5NkZFMjFDRTY5QjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDcwRURCRUUzOEY0MTFFNTg5RDY5NkZFMjFDRTY5QjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5KmW6xAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAO4SURBVHja7JvpcsMgDIRX7//Snc44Ext0rMThpg4/2jRxDB8IHYsLeWQDf+Vvexw2MJX75im8ERsfgI0F2FvBr53di42N1JfeHoX97m879nEP7OVue1uD7Vx33OQ27OPnEqsEy30H9e/vZdgB9x2LfXqxDhuW8ePdNjnvhrqOHQ3ZgLq6M2y1bJzmu7zawagNrL3uDE4bwEYNe58Tn4bNJpc2NraGrmFsmYy9N3ThYmfk3oaW1bqDD7F3QzdbFfQyT8DesNivWKF3Rwewk10MYhf3ViXlR4t9fHD6i94ZKjbYuI0R6pznvWIfa9/0DdYJtqE6hT3kTlMT1d0ZLbZTgakDPL2gjHxS9MxcqmGrmSGH3ZZOYb7Sxzq0+fgKbPTLoRe6YLyZ6ocDbN1Iy9Spa21sTmaAYawl9a5f7qXYOK99VV0Zzyt7K5fV2E1+llZOU7ZpXFFNi8tGrmalCezkWE2JoWYwBcu4qAtK+CKw80tkSgy1bXLlKKXgyGKj9xJV7uHVjr/YZpN2qgAeegwbVaXYcsY2tjRGnsKGWsCUdyPK5wK8mbywvezQxW6Nu4rdiW9VfYP6lpaW8tiwjDvj01pnMCjrsNRQhbs4OVXnpojt1yPT8yRja2myJQLBbQAbURm2gBrGbrOSU21Qbe1VwDYHwNwqOUtdAtp22iWn8Ars6ztKiRUXQlCxiQOGjG3oeo4h9jh99O+dt3seu3N3gTozUv20vgmKFmyYkxv4Mtj9GVRUYgxiI6BW9raqM9SwxcBmxbgqdjfruvJvTIohBoWJi47dvB/h1NU3pheQ+6OCrfjY/qRZkuC0+3er1m3Y1Tqs32Wc//e1GRjCq+YMef2w9xLV8lMdAp8vNEvnYmt2aEaypPxVgKawrek0tghCu1KroPj8qw+VoxK581Xn1ry6cok3WiQTMNjDR2AwkrtUbZrG7irWtyUMYudqEEaktz/WO0bStojBh9gF6rBfAjrw5AamkP40HEGY5dm9hHGTtgF/mr3COefR+rRl1llIRYKD12MQEQawiw94lYg5bHGWmlluinrlk7ZKrDUKz4xzLGOnnvCagm1XeuCmbAK2qvksxZY0treDuUiCyNGutnI9HLulCJcSpbB1FyHLuCWLHaUWVRuXXdRe8pU5HmBuRJnCDhOnloEpV1Zgb/hvR48FFbWylqzsbgx2SrX6DGyJs7SsVhdm5CJ/iltI7Lke5GZsRzmd9Nzzn8K2wyS29XQbuDwQ2xqlPLJ9sb/YX+wv9j9qPwIMAGQPOCcACnDkAAAAAElFTkSuQmCC") no-repeat 50% 0%;
	background-size: 123px 38px;
	display: block;
	position: relative;
	padding-top: 50px;
	top: 45%;
	
}
/* logo出现动画 */
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);


/*Downloaded from https://www.codeseek.co/HelloLeeChan/loading-page-by-windowonload-NqJxoO */
window.onload = function(){
	setTimeout(function(){
	var loader = document.getElementsByClassName("loader")[0];
	loader.className="loader fadeout" ;//使用渐隐的方法淡出loading page
	setTimeout(function(){loader.style.display="none"},1000)
	},1000)
}//强制显示loading page 1s

Comments