---
title: "Replacing the Progress Indicator UI"
slug: "s3suite94-customize-replaceui-webapp-sdk-progress-indicator-ui"
updated: 2026-10-27T18:41:54Z
published: 2026-10-27T18:41:54Z
canonical: "docs.onespan.com/s3suite94-customize-replaceui-webapp-sdk-progress-indicator-ui"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.onespan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Replacing the Progress Indicator UI

The JS App SDK has a default progress indicator that is displayed when the operation is running in the background and there is no UI displayed (e.g. during network requests).

![](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/image6.jpg?sv=2026-02-06&spr=https&st=2026-10-29T04%3A19%3A46Z&se=2026-10-29T05%3A19%3A46Z&sr=c&sp=r&sig=9Lzygmrb59vIDbzlhUtlea1EmXGK2qgqfX%2Fojiy0s7I%3D)

```javascript
In order to replace the default progress indicator with your own custom UI, you need to implement the IndicatorListener interface.
// IndicatorListener implementation shows or hides
// the custom progress indicator.
function SampleProgressIndicatorListener() {
  // This method is called by the SDK when it needs to show or hide
  // the progress indicator, and the boolean parameter "show" indicates
  // what to do.
  this.changeIndicatorVisibility = function(show) {
    if(show) {
      // Show the custom progress indicator.
    } else {
      // Hide the custom progress indicator.
    }
  }
}
Then in the Controller, you need to register the custom listener.
startcodeProgressIndicator.getInstance().setListener
                                (new SampleProgressIndicatorListener());
```

Refer to the [Client API Docs](/dpoa/docs/s3suite94-web-client-api-docs) for details on the IndicatorListener interface and the ProgressIndicator class.

#### Working Examples in Tutorial Web App

- Refer to the SampleProgressIndicatorListener class in the file js/samples.js for implementation of IndicatorListener interface.
- Refer to js/Controller.js for usage.