Difference between revisions of "JavaScript CSS - Loading spinner with vanilla JS"

 
Line 32: Line 32:
  
 
<pre><head>
 
<pre><head>
<link rel="stylesheet" type="text/css" href="style.css">
+
<link rel="stylesheet" type="text/css" href="loadingspinner.css">
 
<script src="loadingspinner.js"> </script>
 
<script src="loadingspinner.js"> </script>
 
</head>
 
</head>

Latest revision as of 13:24, 20 April 2020

--- 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>