Having a little bit of struggle while designing a iOS app. What do you think is the right position for progress indicator - right or left side of text?

Checking for updates... loading animation


loading animation Checking for updates...

In Apple HIG they still have indicator on the right side of text, yet since iOS 11 they moved it to the left side.

For me the right side is a better choice - it appears more optically balanced and I know what is happening and then that it's still happening, rather than that something is happening and then figuring out what. On the other hand, Apple uses the left side indicator in system settings (SW update) and apps (Maps).

  • Show it below, problem solved :) Also remove the triple dots (...) they are kind of a static progress indicator. No need for them when you have the animation
    – Anders
    Feb 18 '19 at 14:57

Considering left-to-right mentality, I think, the difference is this:

If it’s to the left, the user will read it as “we’re working, and here’s why...” - they’ll “read” the indicator first and then, if confused or interested, the description for it that will clarify what’s happening.

If it’s to the right, the user will read it as “we’re doing this and this, a here’s the indicator to show that we’re still doing it” - they’ll read the description, and the indicator will assure them that it’s still going.

So, to me it seems you have to use whichever case suits your message to the user best and go with it. Note, that for RTL languages it’s the other way around.


Like exp mentioned in the other answer, both the approaches have different narratives that makes sense. Adding to that:

Visual designer can direct the flow of reading in a correct way. Though having an icon to the right may appear optically balanced, the reading flow will be broken because of the bold stroke, dark colored icon. Adding to it the animation amplifies the attention.

For LTR, having icon to the left side of text is a safe side approach. There are certain exceptions like for example Animating the ellipsis of 'Checking the updates... '. I created a small image explaining my thoughts:

enter image description here


Ideally, I'd consider putting the activity indicator in the center of the view, with the text 20-30pt below it. This is mostly something I try to follow by convention and if there are no other patterns implemented.

Is the activity indicator fading in & out of the view if the content is being loaded? If the response time is acceptably fast (under 2 seconds), is it worth showing the "Checking for updates" text?

  • Unfortunately can't do this, there is no space for two line indication. Indicator is simply on screen, replacing user input that is being sent to server, so this indication is visible up to timetout (10s)
    – Wreis
    Feb 14 '19 at 9:00

Considering the reading practice of the user. The users will read from left to right. So showing a loader before the user starts to read is the best experience from my perspective.

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