b0c0de/animation-loading-page-loader.markdown

## animation-loading-page-loader.markdown

      
    Raw
  

              animation-loading-page-loader.markdown
            
          
    Animation Loading Page / Loader

CSS3 & JavaScript
A Pen by Bojan on CodePen.
License.

  
## index.html
<body onload="loader()">
	<h1>Animation Loading Page</h1>
	<div id="Loading">
		<div></div>
	</div>
</body>

## script.js
function loader(){
   loader = setTimeout(showPage, 36000)
}
function showPage(){
   document.getElementById("Loading").style.display = "none"
}

## style.css
@charset "utf8";
*,*:after,*:before,html{box-sizing:border-box}
body{margin:0;padding:0}
h1{
	font-family:font-family:Tahoma,Geneva,sans-serif;
	font-style:normal;
	font-weight:700;
	font-size:32px
	}
h1,#Loading>div{
	top:50%;
	left:50%;
	display:block;
	position:absolute;
	transform:translate(-50%,-50%)
	}
#Loading{
	background:#000;
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	z-index:999
	}
#Loading>div{width:200px;height:200px}
#Loading>div:before,#Loading>div:after{
	content:"";
	display:block;
	position:absolute;
	border-radius:50%;
	border:4px solid red;
	border-top-color:blue
	}

#Loading>div:before{width:100%;height:100%;animation:loading 5s linear infinite}
#Loading>div:after{
	width:150px;
	height:150px;
	top:25px;
	left:25px;
	animation:loading 5s linear infinite reverse
	}
@keyframes loading{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
	}
	<body onload="loader()">
	<h1>Animation Loading Page</h1>
	<div id="Loading">
	<div></div>
	</div>
	</body>
	function loader(){
	loader = setTimeout(showPage, 36000)
	}
	function showPage(){
	document.getElementById("Loading").style.display = "none"
	}
	@charset "utf8";
	,:after,*:before,html{box-sizing:border-box}
	body{margin:0;padding:0}
	h1{
	font-family:font-family:Tahoma,Geneva,sans-serif;
	font-style:normal;
	font-weight:700;
	font-size:32px
	}
	h1,#Loading>div{
	top:50%;
	left:50%;
	display:block;
	position:absolute;
	transform:translate(-50%,-50%)
	}
	#Loading{
	background:#000;
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	z-index:999
	}
	#Loading>div{width:200px;height:200px}
	#Loading>div:before,#Loading>div:after{
	content:"";
	display:block;
	position:absolute;
	border-radius:50%;
	border:4px solid red;
	border-top-color:blue
	}

	#Loading>div:before{width:100%;height:100%;animation:loading 5s linear infinite}
	#Loading>div:after{
	width:150px;
	height:150px;
	top:25px;
	left:25px;
	animation:loading 5s linear infinite reverse
	}
	@keyframes loading{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
	}