My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

UX: Where to display a spinner on a button?

Mev-Rael's photo
Mev-Rael
·Nov 27, 2016

Without a spinner

4%

Add Spinner before button text

30%

Add Spinner after button text

20%

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:

  1. When button is clicked, it should be disabled to prevent clicking again;
  2. Spinner added before text because text still should be displayed, so from accessibility point of view user could see what action he "clicked".
  3. 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?
  4. If something went wrong, button is enabled again and spinner removed;