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=" | + | <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 12: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>
