Skip to main content

Loading modal

Loading modals appear on top of the main content of a webpage or application, blocking interaction with the rest of the page until the process is finished.

Loading modal - usage

Loading modals communicate that the system is performing an operation that takes time and that users should wait. Use them for short blocking tasks (upload, processing) where users should not interact with the page until completion.

Loading modal

  1. Spinner
  2. Message

Options​

  • Message: Provide a concise, contextual message that explains what is happening (e.g. "Uploading files" instead of "Loading", see writing guidelines).

Behavior in context​

  • Interaction: Loading modals open and close automatically to prevent user interaction.
  • Overflow: If the message exceeds the available width, it breaks into multiple lines.
  • Placement: Horizontally top-aligned, vertically centered.
  • Responsiveness: Loading modals adjust their width depending on the screen width.

States​

Loading modals have two states: Closed and opened.

Dos and Don’ts​

  • Do only use if any user interaction needs to be blocked, otherwise use spinners instead
  • Do use if user interaction needs to be blocked and the progress is unknown, otherwise use progress indicators placed in custom modals instead
  • Don’t block users for long tasks without an alternative
  • Don’t show vague messages that leave users unsure what is happening