How can I show a temporary webpage for a few seconds then my website will load?

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>

Try using the window.onload event, combined with showing and hiding content in divs. Note that you may have to play around with the various ways of showing and hiding content, given that some will delay the loading of that content until it is displayed.

1 Like

The loading animation is deceptively simple. A div with a centered animated svg image covers the entire page. When the animation is complete, the div animates down and out of view. No temporary pages required.