loadscreen.html

<style>
body {
	background: #fff;
	user-select: none;
    overflow: hidden;
	margin: 0;
}
#loading_box {
	background: #252525;
	padding: 0.5%;
	width: 25%;
}
#loading_text {
	color: white;
	font-weight: 900;
	font-family: monospace;
	text-transform: capitalize;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-bottom: 2%;
	overflow: hidden;
}
#loading_bar {
	background: #696969;
	height: 2.5%;
}
#loading_fill {
	background: white;
	transition: 3s;
	height: 100%;
	width: 0%;
}
#fadeOut {
	position: absolute;
	background: #000;
	transition: .5s;
	width: 100%;
	height: 0%;
	top: 0;
}
</style>
<div id=loading_box>
	<div id=loading_text>Sandbox!</div>
	<div id=loading_bar>
		<div id=loading_fill></div>
	</div>
</div>
<div id=fadeOut></div>
<script>
let initTotal = '?'
let dataTotal = '?'
let initCount = 0
let dataCount = 0
const actions = { 
	startInitFunction(data) {}, // type
	startInitFunctionOrder(data) { // type
		initTotal = data.count
		initCount = 0
		document.getElementById('loading_text').innerHTML = 'Running functions of order ' + data.order + ' (' + initTotal + ' total)'
	},
	initFunctionInvoking(data) { // idx
		++initCount
		document.getElementById('loading_text').innerHTML = 'Invoking ' + data.name + ' ' + data.type + ' init (' + initCount + ' out of ' + initTotal + ')'
	},
	initFunctionInvoked(data) {}, // type, name
	endInitFunction(data) {
		document.getElementById('loading_text').innerHTML = 'Done running ' + data.type + ' init functions!'
	},

	startDataFileEntries(data) {
		dataTotal = data.count
		document.getElementById('loading_text').innerHTML = 'Loading data files (' + dataTotal + ' total)'
	},
	onDataFileEntry(data) { // type, isNew
		document.getElementById('loading_text').innerHTML = 'Loading ' + data.name
	},
	endDataFileEntries() {
		document.getElementById('loading_text').innerHTML = 'Done loading data files!'
	},

	performMapLoadFunction(data) { // idx
		++dataCount
		document.getElementById('loading_text').innerHTML = 'Loading map (' + dataCount + ' out of ' + dataTotal + ')'
	},

	onLogLine(data) {
		document.getElementById('loading_text').innerHTML = data.message + '..!'
		if (data.message == 'Awaiting scripts') {
			document.getElementById('fadeOut').style.height = '100%'
		}
	},
	loadProgress(data) {
		document.getElementById('loading_fill').style.width = data.loadFraction * 100 + '%'
	}
}
window.addEventListener('message', e => actions[e.data.eventName](e.data))
</script>