I have provided the loading icon on the login button, but I am not 100% sure that if its good place to show loading icon.

My question is

Should I place the loading icon on the login button Should I blackout the whole screen and show the loading icon in the center.

  • 1
    I understand what you're saying but a visual example of what you currently have would be appreciated. Aug 19, 2015 at 6:51

2 Answers 2


As always: it depends on the situation.

  • Can you keep on using the website while waiting? In this case you shouldn't black out the entire screen; rather block the actionable area which is the login form or at the very least the button itself. Since changing the text inputs won't have any effect, to me it would seem logic to block the entire screen (or even replace it with a whole different "trying to login..." screen.
  • Is the login button the start of your flow? E.g. Facebook app for which you must first log on. In this case you may block the entire window or again replace the form with a "trying to login..." screen. Again, only the button would not provide any benefit as changing something here is not useful.

Idea behind it: show only what you need, when you need it; limit confusion and ambiguity.


I think rather than showing a loading icon, you can show progression or current loading state in a more delightful and understandable manner. Here are some examples of progression buttons - http://tympanus.net/Development/ProgressButtonStyles/

I would just suggest one change in given examples. During Progression, change the label from submit to "Submitting" or from login to "Logging In".

Hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.