Here's the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader V1.0 by roundCube</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="background">
<div id="button" onclick="loading()"><h1 style="text-align:center;color:white;font-size:90px;line-height:0.5;"><b>Enter</b></h1></div>
<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>
<div id="bg4"></div>
<div id="bg5"></div>
<div id="bg6"></div>
<div id="loading"><h1 style="text-align:center;color:white;font-size:90px;line-height:0.5;"><b>Loading..</b></h1></div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">© roundCube 2015</a></div>
</div>
</body>
<style>
#background{
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
background-color:white;
-webkit-transition: all 1.10s ease;
-moz-transition : all 1.10s ease 0s;
}
#button{
position:absolute;
top:43%;
left:37.5%;
height:87px;
width:25%;
background-color:rgb(255,136,136);
border-bottom-width:8px;
border-bottom-color:rgb(255,187,187);
border-bottom-style:solid;
-webkit-transition: all 0.75s ease;
-moz-transition : all 0.75s ease 0s;
cursor: pointer;
cursor: hand;
}
#button:hover{
height:16%;
top:43.2%;
border-bottom-width:15px;
}
#bg1{
position:absolute;
top:100%;
left:0px;
height:0%;
width:100%;
background-color:rgb(255,255,68);
-webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;
}
#bg2{
position:absolute;
top:100%;
left:0px;
height:0%;
width:100%;
background-color:rgb(255,68,68);
-webkit-transition: all 0.75s ease;
-moz-transition : all 0.75s ease 0s;
}
#bg3{
position:absolute;
top:100%;
left:0px;
height:0%;
width:100%;
background-color:rgb(68,68,255);
-webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;
}
#bg4{
position:absolute;
top:100%;
left:0px;
height:0%;
width:100%;
background-color:rgb(255,68,255);
-webkit-transition: all 0.5s ease;
-moz-transition : all 0.5s ease 0s;
}
#bg5{
position:absolute;
top:100%;
left:0px;
height:0%;
width:100%;
background-color:rgb(255,255,68);
-webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;
}
#bg6{
position:absolute;
top:100%;
left:0px;
height:0%;
width:100%;
background-color:rgb(255,68,68);
-webkit-transition: all 0.75s ease;
-moz-transition : all 0.75s ease 0s;
}
#loading{
position:absolute;
top:43%;
left:37.5%;
height:14%;
width:25%;
opacity:0;
visibility:hidden;
-webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;
}
#copyright{
position:absolute;
bottom:5px;
left:0px;
width:100%;
height:50px;
color:white;
text-align:center;
}
#copyright a{
text-decoration:none;
color:white;
}
@media only screen and (max-width:960px)
{
#button b,#loading b{
font-size:70px;
}
}
@media only screen and (max-width:750px)
{
#button b,#loading b{
font-size:60px;
line-height:0.4;
}
}
@media only screen and (max-width:580px)
{
#button b,#loading b{
font-size:45px;
line-height:0;
}
@media only screen and (max-width:459px)
{
#button,#loading{
width:40%;
left:30%;
}
</style>
<script>
function loading(){
var button = document.getElementById("button");
var bg1 = document.getElementById("bg1");
var bg2 = document.getElementById("bg2");
var bg3 = document.getElementById("bg3");
var bg4 = document.getElementById("bg4");
var bg5 = document.getElementById("bg5");
var bg6 = document.getElementById("bg6");
var loading = document.getElementById("loading");
var background = document.getElementById("background");
if(bg6.style.top=="0%")
{
background.style.visibility="hidden";
background.style.opacity="0";
}
else if(bg5.style.top=="0%")
{
bg6.style.height="100%";
bg6.style.top="0%";
}
else if(bg4.style.top=="0%")
{
bg5.style.height="100%";
bg5.style.top="0%";
}
else if(bg3.style.top=="0%")
{
bg4.style.height="100%";
bg4.style.top="0%";
}
else if(bg2.style.top=="0%")
{
bg3.style.height="100%";
bg3.style.top="0%";
}
else if(bg1.style.top=="0%")
{
bg2.style.height="100%";
bg2.style.top="0%";
}
else if(button.style.opacity=="0")
{
bg1.style.height="100%";
bg1.style.top="0%";
}
button.style.opacity="0";
loading.style.opacity="1";
loading.style.visibility="visible";
setTimeout("loading()",1000);
}
</script>
</html>
If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page
If you like our work please don't remove the hyperlink to our Facebook page.
![Pinterest](http://pinterest.com/pin/create/button/?url=https://roundcubee.blogspot.com/2015/07/responsive-loading-screen-v10.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ZkbDmaTjHjACvg4NP_vH_sxST7kWRia9eRFYzuGXfay_bLkSxlac6pnuwNnNU4QXKmhPgkt0iyW5uuL3Y0GLMudVx4AUlt8w56F_tuSPqSakQxIcTx9JOg1sn8QqQoN4ijP1zGx6BdU/s72-c/live-demo.png&description= Here's the code snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...){kind=link}
0 comments: