public/index.html

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

<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>Scuff</title>

	<style>
		body {
			margin: 0;
			padding: 0;
		}

		#scuff-loading {
			width: 100vw;
			height: 100vh;

			background-color: #111;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		#scuff-loading>div {
			width: min(50px, 5vw);
			height: min(50px, 5vw);
			border-radius: 50%;
			border: 15px solid transparent;
			border-top-color: #07d;
			border-bottom-color: #07d;
			animation: spin 1s linear infinite;
		}

		@keyframes spin {
			to {
				transform: rotate(360deg);
			}
		}
	</style>

	<script type="importmap">
		{
			"imports": {
				"scuff": "./bundle/core/scuff.mjs",
				"scuff-scratch": "./bundle/scratch/scuff-scratch.mjs"
			}
		}
	</script>
	<script src='lib/require.js'></script>
	<script src='bundle/index.mjs' defer></script>
</head>

<body>
	<div id="scuff-loading">
		<div></div>
	</div>
</body>

</html>