Disable button and show spinning arrow on click
Nov 28, 2025 by Thibault Debatty | 285 views
https://cylab.be/blog/459/disable-button-and-show-spinning-arrow-on-click
When working with slow operations, it’s common to encounter multiple clicks on buttons while they’re busy. This can lead to unexpected behavior and frustration for users. In this post, we’ll explore a simple solution to prevent multiple clicks on busy buttons using Font Awesome.
Font Awesome
First, add the font awesome library to your project. This library contains a collection of icons, including arrows, and CSS classes to append effects (like rotation).
For a quick prototype, you can simply use if from cdnjs, by adding the following lines to the <head> section of your html.
<head>
// ...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
Javascript
Next, add the following JS snippet to your app.js or directly on your webpage:
/**
* Disable buttons on click and show spinning arrows
* if they have hte class disable-on-click
* https://cylab.be/blog/459/disable-and-show-spinning-arrow-on-click
*/
window.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll(".disable-on-click").forEach(function(button){
button.addEventListener('click', function(){
// wait for the form to submit, then disable the button
// otherwize the form is not submitted
setTimeout(function() {
button.disabled = true;
button.innerHTML = '<i class="fa-solid fa-arrows-rotate fa-spin"></i> Please wait ...';
}, 1);
});
});
});
Usage
You can now use the class disable-on-click on any button:
<a class="btn btn-primary disable-on-click">Some slow operation</a>
This blog post is licensed under
CC BY-SA 4.0
