JavaScript CSS - Loading spinner with vanilla JS

--- CSS "loadingspinner.css" ---

#loading-spinner {
	animation: round 2s linear infinite;
	
	width: 50px;
	height: 50px;
	border: 5px solid #ccc;
	border-top-color: #ff0000;
	border-radius: 100%;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

@keyframes round{
	from{transform: rotate(0deg)}
	to{transform: rotate(360deg)}
}

--- JavaScript "loadingspinner.js" ---

function hideLoadingspinner(){
	document.getElementById("loading-spinner").style.display = "none";
}

--- HTML ---

<head>
<link rel="stylesheet" type="text/css" href="loadingspinner.css">
<script src="loadingspinner.js"> </script>
</head>

<body onload="hideLoadingspinner()">

	<!-- Add this loading spinner div at the top or as the first loaded item -->
	<div id="loading-spinner"></div>
	
</body>