Design Openbook

Loading and Progress Indicators

What is the difference between a spinner, a progress bar and a skeleton screen? Use a spinner when the wait length is unknown, a progress bar when you know the percentage, and a skeleton screen to preview the layout while a full screen loads.

These are the bars and dots that show waiting and progress. Which one you pick depends on what you are waiting for.

Terms and previews

Tap a preview to pause it; tap again to play.

  1. Spinner

    A spinning indicator. For when you do not know how much time is left

  2. Progress bar

    A bar that fills up when you know the percent done

  3. Skeleton screen

    A loading view that first draws gray blocks where content will go

  4. Step indicator

    Shows the current position among step 1, step 2, step 3

  5. Story progress bar

    A bar split into segments, for moving through several items in turn

  6. Reading progress bar

    A line at the top that fills as you read an article

  7. Password strength meter

    Segments that fill to show how secure a password is

  8. Home indicator

    The horizontal bar at the bottom of an iPhone. A gesture handle, not a progress indicator

How to use it

  • If it finishes within 1 second, show nothing. For 1 to 3 seconds use a spinner. For longer waits or a full-screen load, use a skeleton.
  • For flows of 3 or more steps such as checkout or sign-up, use a step indicator to show which step the user is on and how many remain.
  • Do not put a button directly above the home indicator. It collides with the swipe-up gesture.

Prompts to copy

3-step checkout

Build a checkout in 3 steps: Shipping address -> Payment method -> Review.
- A Step indicator at the top. Completed steps show a check, the current step is highlighted, remaining steps are dimmed.
- Show a Skeleton screen while the next step's data loads.
- When the pay button is pressed, put a small Spinner inside the button and disable it.

Source posts: @uxwoodytips, @ui_motion_prompts

All cards (27)