Here I hope to show a spinning loading wheel when a button is clicked. e.g. when a upload file button is hit and before the result comes back, I hope to show a spinning wheel so user knows it is processing in the backend.
solution simple. create a div with animation showing a spinning wheel, whose display is defaulted to none, so it is not showing. when a button is clicked, a javascript snippet changes the display to 'block' so it is showing a spinning wheel. when the result comes back and the page is refreshed, the div is refreshed again with the default none display.
<html>
<head>
<script>
function show_loader()
{
var x = document.getElementById("loader");
if (x.style.display == "none") {
return x.style.display = "block"; //has to use return ..., otherwise is wouldnt work...
}
}
</script>
<style>
#loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
animation: spin 2s linear infinite; /*set animation for the div */
-webkit-animation: spin 2s linear infinite; /*set animation for the div */
}
@keyframes spin { /*define animation for ie?*/
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-webkit-keyframes spin { /*define animation for a differen browser like chrome and safari*/
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
</style>
</head>
<body>
<p>test loading wheel</p>
<input type="button" value="show" onclick="show_loader()"/>
<div id="loader" style="display:none"></div>
</body>
</html>