How can I implement a pre shown web page into my size which displays for a few seconds when the user first clicks on the URL of my website? For example, on this website the developer has put a logo with a transition of some sort and then his website loads. I’m trying to implement this into my website. However, I was wondering if anyone new the technical name for this so I can read up on how to do it and if anyone could possibly show me how to do it and get me going?
Here is my hhttps://codepen.io/liamdocherty1/pen/awwBQX for my website. I linked this incase you need to add some code in order for the webpage to display there at the start for around 3 seconds. PLEASE NOTE REMOVE THE “h” on the URL above.
Here is the codepen I want to be displayed for the 3 seconds at the start.
Below is the HTML/CSS of the codepen I’m trying to display for 3 seconds before the website loads.
body{
background:#333;
background: -webkit-gradient(radial, center center, 120, center center, 900, from(#111), to(#111));
background:-moz-radial-gradient(circle, #111, #111);
}
.loader{
margin:200px auto;
}
h1{
font-family: 'Actor', sans-serif;
color:#FFF;
font-size:16px;
letter-spacing:1px;
font-weight:200;
text-align:center;
}
.loader span{
width:16px;
height:16px;
border-radius:50%;
display:inline-block;
position:absolute;
left:50%;
margin-left:-10px;
-webkit-animation:3s infinite linear;
-moz-animation:3s infinite linear;
-o-animation:3s infinite linear;
}
.loader span:nth-child(2){
background:blye;
-webkit-animation:kiri 1.2s infinite linear;
-moz-animation:kiri 1.2s infinite linear;
-o-animation:kiri 1.2s infinite linear;
}
.loader span:nth-child(3){
background:red;
z-index:100;
}
.loader span:nth-child(4){
background:red;
-webkit-animation:kanan 1.2s infinite linear;
-moz-animation:kanan 1.2s infinite linear;
-o-animation:kanan 1.2s infinite linear;
}
@-webkit-keyframes kanan {
0% {-webkit-transform:translateX(20px);
}
50%{-webkit-transform:translateX(-20px);
}
100%{-webkit-transform:translateX(20px);
z-index:200;
}
}
@-moz-keyframes kanan {
0% {-moz-transform:translateX(20px);
}
50%{-moz-transform:translateX(-20px);
}
100%{-moz-transform:translateX(20px);
z-index:200;
}
}
@-o-keyframes kanan {
0% {-o-transform:translateX(20px);
}
50%{-o-transform:translateX(-20px);
}
100%{-o-transform:translateX(20px);
z-index:200;
}
}
@-webkit-keyframes kiri {
0% {-webkit-transform:translateX(-20px);
z-index:200;
}
50%{-webkit-transform:translateX(20px);
}
100%{-webkit-transform:translateX(-20px);
}
}
@-moz-keyframes kiri {
0% {-moz-transform:translateX(-20px);
z-index:200;
}
50%{-moz-transform:translateX(20px);
}
100%{-moz-transform:translateX(-20px);
}
}
@-o-keyframes kiri {
0% {-o-transform:translateX(-20px);
z-index:200;
}
50%{-o-transform:translateX(20px);
}
100%{-o-transform:translateX(-20px);
}
}
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="loader">
<h1>LIAM DOCHERTY'S PORTFOLIO IS</h1>
<span></span>
<span></span>
<span></span>
<br>
<h1>LOADING</h1>
</div>
</body>
</html>