Difference between revisions of "JavaScript CSS - Loading spinner with vanilla JS"
(Created page with "'''--- CSS "loadingspinner.css" ---''' <pre>#loading-spinner { animation: round 2s linear infinite; width: 50px; height: 50px; border: 5px solid #ccc; border-top-colo...") |
(No difference)
|
Revision as of 13:11, 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").style.display = "none";
}
--- HTML ---
<head> <link rel="stylesheet" type="text/css" href="style.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>
