Skip to content

AI Progress Indicator

The AI progress indicator is a UI component that uses animation to visually represent the progress of events or operations.

Using the AI Progress Indicator

The AI progress indicator functions as a composable element. Here's how you use it:

 FioriAIProgressIndicator(
            messageText = "Some text",
            textOnRight = true
        )
 ```

This shows a visual representation of the AI indicator UI on the screen. Use the `messageText` parameter to display a message alongside the animated progress. If `textOnRight` is set to true, the text appears on the right side. Otherwise, the text appears below the animated icon.

## `FioriAIProgressIndicator`

`FioriAIProgressIndicator` is defined as follows:

```kotlin
@Composable
fun  FioriAIProgressIndicator(
    modifier: Modifier = Modifier,
    messageText  : String? = null,
    textOnRight: Boolean = false,
    colors : FioriAIProgressIndicatorColors = FioriAIProgressIndicatorDefaults.colors()
    )

To override with custom values, use FioriAIProgressIndicatorDefaults.colors(boarderColor = YOURCOLOR, labelColor= YOURCOLOR).

AI Progress Indicator with text on right

AI Progress Indicator default

Same Page Layout

Same page Layout place an AI progress indicator over a layer of composable UI.

SamePageLoadingAILayout(inProgress = inProgress, "Loading Indicator") {
        //Your composable code goes heare
}

AI Progress Indicator with text on right


Last update: April 23, 2025