UX: Where to display a spinner on a button?
Without a spinner
4%
replace text with Spinner
46%
84 votes · Closed
You have a button. User clicks on button, some async operation is awaited, rotating spinner icon added to the button, button disabled while form is submitting or AJAX processing. What is your preferred way to display a spinner icon?
My vision is:
- When button is clicked, it should be disabled to prevent clicking again;
- Spinner added before text because text still should be displayed, so from accessibility point of view user could see what action he "clicked".
- Spinner displayed before and not after because I am RTL and seeing icon first helps me to understand that some action is loading/performing some ms faster. Probably for LTR icon should be displayed after a text?
- If something went wrong, button is enabled again and spinner removed;