---
title: "Replacing the progress indicator UI for Web"
slug: "dpo-replace-web-app-sdk-ui-for-the-progress-indicator"
updated: 2026-10-27T20:13:31Z
published: 2026-10-27T20:13:31Z
canonical: "docs.onespan.com/dpo-replace-web-app-sdk-ui-for-the-progress-indicator"
---

> ## 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 for Web

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-29T02%3A37%3A06Z&se=2026-10-29T03%3A37%3A06Z&sr=c&sp=r&sig=NjXBVzztMwmDilMleymnFXmS5bsxu6irnOWSBrtRJL0%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-1) 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.