Jared,
Here is a sample of a Splash Screen that goes away after a few seconds:
Code taken from: How do you make a JavaScript splash page - JavaScript - The SitePoint Forums
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Load a basic WebMap - 4.8</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.overlay {
opacity:0;
position:fixed;
top:-999em;
left:-999em;
width:100%;
height:100%;
display:table;
background:rgba(0,0,0,0.8);
-webkit-animation: splash 10s forwards;
animation: splash 10s forwards;
}
.overlay-inner {
display:table-cell;
vertical-align:middle;
text-align:center;
}
.message {
border:10px solid red;
border-radius:10px;
background:#fff;
display:inline-block;
vertical-align:middle;
width:50%;
text-align:left;
padding:10px;
}
@-webkit-keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@-moz-keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@-ms-keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script>
<script>
require([
"esri/views/MapView",
"esri/WebMap",
"dojo/domReady!"
], function(
MapView, WebMap
) {
var webmap = new WebMap({
portalItem: {
id: "f2e9b762544945f390ca4ac3671cfa72"
}
});
var view = new MapView({
map: webmap,
container: "viewDiv"
});
});
</script>
</head>
<body class="claro">
<div id="viewDiv"></div>
<div class="overlay">
<div class="overlay-inner">
<div class="message">
<p>Lorem ipsum dolor sit amet consecetueur adispicing elit amet. Lorem ipsum dolor sit amet consecetueur <a href="#">adispicing elit</a> amet.Lorem ipsum dolor sit amet consecetueur adispicing elit amet.Lorem ipsum dolor sit amet consecetueur adispicing elit amet. </p>
</div>
</div>
</div>
</body>
</html>