Skip to main content

Skeleton

Overview: Progress indicators​

Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen. Use a progress indicator for operations that take more than 1 second.

Progress indicators are used to:

  • Assure the user that the system is working.
  • Provide operational transparency.
  • Communicate progress made vs progress pending.
  • Reduce users perception of time elapsed.

Types of progress indicators​

ContextComponentGuidance
Initial page loadSkeleton + progressive loadingUse skeleton loading when content size/shape is known. Load skeleton components, then fade in components as they become available.
Initial page loadLinear page progressUse when the content to be loaded is of unknown or variable size or quantity. Display a description of the process with a linear progress bar (see pattern below).
Full page load or changeFull page busy indicatorUse an overlay to prevent users from interacting with content on a page due to a change, server error, or form submission.
Multiple componentsSkeleton + progressive loadingLoad skeleton components, then fade in components as they become available.
Single component within a pageInline circular progress spinnerUse a contextual circular progress spinner to communicate that either a component's state or data is changing.

Overview: Skeleton​

A skeleton screen is a low fidelity UI into which information is gradually loaded. It gives users a visual cue that the content is being loaded into each UI element and can create perceptions of faster load times (check out a sample UX study). Because of this, it is Forge’s recommended method for loading in new content. Use when content size/shape is known.

Skeleton patterns can be used to load a page initially or to load specific components after an initial load while still allowing users to interact with the rest of the page.

Benefits of skeleton loading:

  • Puts the focus on progress, rather than wait time.
  • Is associated with faster perceived loads times
  • Eliminates surprise.
  • Provides a clear indication of progress.

Best practices​

check_circle_outline

Use Use skeleton loading when content size/shape is known and the wait time is longer than 1 second.

check_circle_outline

Ensure that performance is optimized within the application to minimize load times overall.

check_circle_outline

When loading a list, displaying two to three "list items" in the skeleton should suffice; the skeleton items don't need to match the final number of elements loaded in.

cancel

Build complex UIs with a skeleton. Rectangles and circles work well to represent most UI elements.

cancel

Don't use a skeleton for pages that should take under a second to load.

Components​

  • Use a linear progress indicator to communicate that a specific component is loading. Linear progress indicators may be used at the bottom of text fields, in dropdowns, and in expansion panels.
  • Use a full page busy indicator to to prevent users from interacting with content on a page due to a change, server error, or form submission.
  • Use a circular progress spinner inside a component to communicate that either a component's state or data is changing.

Patterns​

Resources​