In Android, the native button in material style has a "loading" state. This loading state can also be "disabled" state. It looks like this:

HD Screencast - https://gfycat.com/IncompatibleConfusedBergerpicard


The buttons in iOS look like this, on the right:

Does anyone have any design guidelines on how the "loading" state would be?

  • If I'm not forgetting, I haven't seen loading anim inside button in iOS – Shabir Gilkar Mar 8 '18 at 8:24

As per the iOS Guidelines you can give a shot at this!

Loading Spinner

Before Click After Click

Updated Image:

Note: This is for Download Functionality. For a Progress there's a loader displayed after a button is clicked.

As per iOS Guidelines for Native Button Loading.

This One:

iOS loader

Ref: https://developer.apple.com/ios/human-interface-guidelines/controls/progress-indicators/

  • Very interesting thank you @mehul - however these buttons look very custom. These do not look like the standard buttons of the iOS platform. I was looking for a "loading state of a button" which is true to the iOS style guidelines and iOS look and feel. Is there any native buttons in apps by Apple you see that has a button with loading state? – Noitidart Mar 8 '18 at 10:33
  • 2
    There does not exist such a native design which you are looking for in the iOS Human Interface Guidelines. However, I have Updated the answer for the available Guidelines Loading on a Button Click. Hope that helped you! – Mehul Shah Mar 9 '18 at 5:49
  • 1
    Thanks very much! This is a real big help! I noticed that in iOS changing text and border color seem to morph. – Noitidart Mar 9 '18 at 7:42
  • Exactly!!!!!!!! – Mehul Shah Mar 29 '18 at 10:19

 Loding state button

Three options for Loading Button State

  • Thank you @NAP but these are not in iOS style. – Noitidart Mar 8 '18 at 10:31

The iOS loader looks like this:

enter image description here

  • Thank you @RobE, this I know, but I was wanting to see how iOS style incorporates a "loading state" into buttons. True to the iOS style guidelines. – Noitidart Mar 8 '18 at 10:31
  • 1
    I can't find anything in the iOS guidelines about this kind of element. I think you'll have to go custom. – RobbyReindeer Mar 8 '18 at 11:20
  • Thanks Rob, I know they have a circular loading icon button in App store. It is a cloud download icon, and when press it turns to square with ring around it, and the ring gets thicker. Do you recall seeing any loading icons in iOS apps? – Noitidart Mar 8 '18 at 14:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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