WebGL html editing

Found a nice Sample for WebGl Template at:
(Unity) Better Minimal WebGL Template by Sean

Now im trying customize it but looking at it, im completely Confuse.
I’ve just started learning Scripting and this is total a new horrizon for me.
Any one can gimme some pointer how to edit or explains to me which parts do which functions?

Credits to “seansleblanc” , “seleb

<!DOCTYPE html>
<html lang="en-us">

<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>{{{ PRODUCT_NAME }}}</title>
	<style>
		html,
		body {
			background: {{{ BACKGROUND || '#000' }}};
			width: 100%;
			height: 100%;
			overflow: visible;
			padding: 0;
			margin: 0;
		}

		div#gameContainer {
			background: transparent !important;
			position: absolute;
		}

		div#gameContainer canvas {
			position: absolute;
		}

		div#gameContainer canvas[data-pixel-art="true"] {
			position: absolute;
			image-rendering: optimizeSpeed;
			image-rendering: -webkit-crisp-edges;
			image-rendering: -moz-crisp-edges;
			image-rendering: -o-crisp-edges;
			image-rendering: crisp-edges;
			image-rendering: -webkit-optimize-contrast;
			image-rendering: optimize-contrast;
			image-rendering: pixelated;
			-ms-interpolation-mode: nearest-neighbor;
		}
	</style>
</head>

<body>
	<div id="gameContainer">
		<canvas id="unity-canvas" data-pixel-art="{{{ OPTIMIZE_FOR_PIXEL_ART }}}"></canvas>
		<script src="Build/{{{ LOADER_FILENAME }}}"></script>
		<script>
			var canvas = document.querySelector("#unity-canvas");
			var config = {
				dataUrl: "Build/{{{ DATA_FILENAME }}}",
				frameworkUrl: "Build/{{{ FRAMEWORK_FILENAME }}}",
				codeUrl: "Build/{{{ CODE_FILENAME }}}",
#if MEMORY_FILENAME
				memoryUrl: "Build/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
				symbolsUrl: "Build/{{{ SYMBOLS_FILENAME }}}",
#endif
				streamingAssetsUrl: "StreamingAssets",
				companyName: "{{{ COMPANY_NAME }}}",
				productName: "{{{ PRODUCT_NAME }}}",
				productVersion: "{{{ PRODUCT_VERSION }}}",
			};
			var scaleToFit;
			try {
				scaleToFit = !!JSON.parse("{{{ SCALE_TO_FIT }}}");
			} catch (e) {
				scaleToFit = true;
			}
			function progressHandler(progress) {
				var percent = progress * 100 + '%';
				canvas.style.background = 'linear-gradient(to right, white, white ' + percent + ', transparent ' + percent + ', transparent) no-repeat center';
				canvas.style.backgroundSize = '100% 1rem';
			}
			function onResize() {
				var container = canvas.parentElement;
				var w;
				var h;

				if (scaleToFit) {
					w = window.innerWidth;
					h = window.innerHeight;

					var r = {{{ HEIGHT }}} / {{{ WIDTH }}};

					if (w * r > window.innerHeight) {
						w = Math.min(w, Math.ceil(h / r));
					}
					h = Math.floor(w * r);
				} else {
					w = {{{ WIDTH }}};
					h = {{{ HEIGHT }}};
				}

				container.style.width = canvas.style.width = w + "px";
				container.style.height = canvas.style.height = h + "px";
				container.style.top = Math.floor((window.innerHeight - h) / 2) + "px";
				container.style.left = Math.floor((window.innerWidth - w) / 2) + "px";
			}
			createUnityInstance(canvas, config, progressHandler).then(function (instance) {
				canvas = instance.Module.canvas;
				onResize();
			});
			window.addEventListener('resize', onResize);
			onResize();

			if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
				// Mobile device style: fill the whole browser client area with the game canvas:
				const meta = document.createElement('meta');
				meta.name = 'viewport';
				meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
				document.getElementsByTagName('head')[0].appendChild(meta);
			}
		</script>
	</div>
</body>

</html>

Trying to figure out how to make a Box for the Loading Bar and how to how a Logo after/before the unity Logo.