Activity indicator Preview
An activity indicator lets someone know there’s a background task in progress and assures them the system is still working. Use activity indicators for loading states that take longer than one second but avoid them for long loading processes.
For longer processes, try the native determinate progress bar to communicate how much time is left. If it’s possible to load the UI gradually and give someone an idea of the content’s structure, try a shimmer.
Resources
Behavior
Activity indicators are indeterminate and continually cycle to indicate that something is happening, but not when it might be finished. Using indeterminate loaders for long periods can make someone think something’s gone wrong.
Layout
Activity indicators should be positioned relative to where new content will appear. If swiping to refresh a page, the indicator should appear centered at the top of the content region. If loading new results while scrolling through a list, the indicator should appear at the bottom of the screen.
Activity indicators should never block UI. If using a swipe to refresh action, the content should lock below the indicator and then snap back to the top once the refreshed content is loaded.
Don’t overlap activity indicators with the UI behind them
Accessibility
Add an animating label while the activity indicator is on screen to let people who use VoiceOver know what’s happening.
If you know a process will take longer than three seconds, try a HUD with a label to further communicate what’s happening.