AI Progress Indicators

Intro

AI progress indicators provide information about the status of a user’s request while they wait for the content to be generated. These patterns are designed to keep users engaged and informed, manage their expectations, and show that the system is actively processing their request.

AI progress indicators: linear progress indicator (left) and loading indicator (right)

Usage

Do

Use an AI progress indicator in situations where the time for the AI to complete the generation process is not specified.

Don't

  • Don’t use AI progress indicators for operations that take less than a second.
  • Don’t use AI progress indicators to give an estimate of how long the process will take.
  • Don’t apply AI progress indicators in non-AI scenarios.
  • Don’t use AI progress indicators in success or error states.
  • Show users the system is actively working.
  • Inform users about the status of their request.
  • Provide real-time updates on the progress of the AI task.
  • Apply in processing state.
  • Avoid mentioning “AI” in labels when the AI icon is used in the indicators.

Recommended usage of AI progress indicators

Recommended usage of AI progress indicators

Anatomy

Linear Progress Indicator

A. Indicator

The indicator is an animated bar that visually reinforces that the system is actively processing tasks.

B. Track

The track is a static bar behind the indicator that indicates the overall process.

C. AI Icon

The AI icon with looped animation lets users know that AI processes are actively running.

D. Label

The complementary label text informs users that AI processes are actively running.

Anatomy of AI progress indicators: determinate linear progress indicator (left) and indeterminate linear progress indicator (right)

Loading Indicator

A. AI Icon

The AI icon with looped animation lets users know that AI processes are actively running.

B. Label (Optional)

The complementary label text informs users that AI processes are actively running.

All the colors and sizes of the AI icon follow the specification for the in-place loading state in regular buttons.

Anatomy of AI progress indicator: loading indicator

style
column-section-1-1, no-footprint

Behavior and Interaction

When a user initiates content generation, the AI progress indicator is displayed within the progress indicator component, changing its state to “processing” or “loading”. This state persists until the generation is either completed or stopped by the user. The animation of the AI icon continues looping until the process is finished.

Placement

Full Screen

AI progress indicators can be used in a full-screen use case if the user action is the only and primary action in the user flow, and no additional action is allowed during the progress.

Placement of AI progress indicators on a full screen (from left to right): linear progress indicator, loading indicator, and same-page indicator

Partial Screen

AI progress indicators can be used in a partial-screen use case if the loading state only applies to a part of the screen, and other user actions are allowed during the progress.

Placement of AI progress indicator on partial screens

Animation

AI Icon

The AI progress indicator icon features a looping animation that progressively scales up each of its individual star icons.

  1. Starting point with regular AI icon.
  2. Midway point with base star scaled down 45% and upper star scaled up 200%.
  3. End point with base star scaled up 118% and upper star scaled down 65%.

Scaling up individual star icons

Scaling up individual star icons

Loading animation example

Time and Duration

AI progress indicators should be displayed one second after the content generation process is triggered and remain visible for at least 1000ms to avoid flickering.

Recommended duration for animation:

Start to midway point: 800ms

Midway to end point: 800ms

End back to starting point: 300ms

Interaction

Stopping AI Generation Process

It is recommended to provide an option that allows users to stop the AI generation process. For button interaction details, refer to AI buttons.

Stopping AI generation process

Stopping AI generation process

Resources

SAP Fiori for iOS: AI Progress Indicators

Related Components/Patterns: AI Buttons, Linear Progress Indicator, Circular Progress Indicator, [internal_only]AI UI Text[/internal_only]