UX: Where to display a spinner on a button?

9Responses

Write your response…

This answer has received 1 appreciation.

i like those ideas http://tympanus.net/Development/CreativeLoadingEffects/ at least 4-5 of them :) maybe as an alternative to the spinner.

even , i was going to post the same link.

Write a reply...

An extremely interesting question.
I don't think I know enough about the different methods to say which one is best but I know google design have some great guidelines on design and animations etc. I had a look for a submit/spinner section but couldn't find one - maybe you can.

Might I suggest an alternative though - replace the text with other text. E.g. Replace Submit with Submitting...and then the dots on Submitting... are animated, similar use of wording for processing etc.

@Gatesunder brings up an interesting point which I've seen on a number of websites. The idea of making the whole page more opaque with a single spinner in the centre. This would be the most explicit method, which also means that the user can't try to interact with the page elsewhere.

As a side note, regardless which kind of method you choose, specifying a minimum time that the spinner is on the page is a good idea - otherwise the spinner might only appear for a split second which doesn't look great because users don't have time to understand what it was that flashed up in the time it takes to blink.

Hope it helped.

Write a reply...

This answer has received 1 appreciation.

I highly discourage replacing text with a spinner, because that would mean you remove the call-to-action description. Don't ever remove important information from the eyes of the user just because you are working on something! That's bad UX.

Also do not freeze the whole screen if not necessary. Keep the UI usable at all times. Maybe the user doesn't even care about your async operations and just want to carry on... Forcing them to wait would be a bad decision, if it is not needed for the process they are currently working on.

Important: Put a spinner someplace, so the user can see that the application is working. If it is before the text or after doesn't really matter, you should decide based on your design.

Write a reply...

From a users perspective, when I visit sites that enable a overlay spinner, it feels like the site is frozen and I'm blocked from doing anything else. From a coders perspective, I see it's purpose in a 'pay now' or 'checkout' button situation. Then the page is completely disabled to prevent multiple clicks resulting in multiple orders, right? It's also letting the user know 'wait a minute, we're processing your order'. In other situations, I feel a small spinner before the button text is appropriate. It would be less invasive on your UI and make your page feel more accessible to the user.

Write a reply...

Change text on button to "loading..." while loading and change it back to "submit" after transaction completed

Write a reply...

Load more responses

Join a friendly and inclusive Q&A network for coders

  • 🖥Pick the technologies you like & read great content through your feed.
  • 💬Ask a question when you want to learn more about anything.
  • 🚀Share what you know & build your portfolio.
Sign up nowLearn more

loading ...