To make the loading animation work, you can't just rely on CSS :active because the network request to p.php is asynchronous and takes time, so you must use JavaScript to manage the loading state. The most efficient way is to modify your button's HTML to contain both the normal <span id="buttonText">Send Data</span> and a hidden spinning element (<span id="buttonSpinner" class="spinner">), then your JavaScript listener will immediately start the loading state by hiding the text, showing the spinner, and disabling the button; once the fetch is complete (either successful or failed), the .finally() handler runs to stop the loading state by re-enabling the button, hiding the spinner, and restoring the text, ensuring the animation only runs for the exact duration of the server request.