html loading wheel on click

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>

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>

</body>

</html>