Skip to main content

Loading modal

Ask AI
Copy a prompt to ask an AI assistant about this page.

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).
  • Centered: Center- or top-align loading modals consistently with other modals in your app.

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: Vertically centered or top-aligned, horizontally 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