# # Progress Bar Component

## # Overview

Starting from version 9.1.0, Foxit PDF SDK for Web provides APIs to control and customize the progress bar.

## # API preview

The PDFUI constructor has added the parameter `customs.progress`, which can be used to customize the progress bar.

/docs/API_Reference/html/class_p_d_f_u_i.html#aab77ea8e42199d4a8dfe8085922dca07
(opens new window)

PDFViewer has added the `registerProgressListener` method, which can be used to register a progress bar listener.

/docs/API_Reference/html/class_p_d_f_viewer.html#ac920795c9397bd637e2a609ad8e958c6
(opens new window)

PDFViewCtrl has exported the `ProgressComponent` class, which can be obtained through `PDFViewCtrl.viewerui.ProgressComponent`.

/docs/API_Reference/html/class_progress_component.html
(opens new window)

## # Affected scope

When one of the following actions is performed, the default progress bar will be displayed:

1. PDFDoc.sign
2. PDFDoc.addWatermark
3. Action: Run Form Recognition on the UI
4. PDFViewer.print
5. PDFViewer.printEx
6. PDFDoc.addPagingSealSignature

## # How to use

#### # Using the `customs.progress` parameter in the PDFUI constructor

    <body>
        <!-- ... -->
        <div id="pdf-ui"></div>
        <div id="progress-bar"></div>
        <!-- ... -->
    </body>

    var progressBar = document.getElementById('progress-bar');
    var pdfui = new PDFUI({
        // ...
        customs: {
            progress: class Progress {
                updateProgress(progress, status) {
                    progressBar.innerText = `${progress}%`;
                }
                show(coverOn) {
                    progressBar.style.display = 'block';
                    progressBar.innerText = '0%';
                }
                hide() {
                    progressBar.style.display = 'none';
                }
            }
        },
        // ...
    });

    /* ... */
    #progress-bar {
        display: none;
        position: absolute;
        inset: 0;
        text-align: center;
        line-height: 100vh;
        z-index: 9999;
        background: rgba(255, 255, 255, 0.6);
        font-size: 24px;
    }
    /* ... */

#### # Using PDFViewer.registerProgressListener

    <body>
        <!-- ... -->
        <div id="pdf-viewer"></div>
        <div id="progress-bar"></div>
        <!-- ... -->
    </body>

    var pdfViewer = new PDFViewer({
        // ...
    });
    pdfViewer.init('#pdf-viewer');
    var progressBar = document.getElementById('progress-bar');
    pdfViewer.registerProgressHandler(function (type,value,status) {
        if (status === PDFViewCtrl.constants.PROGRESS_STATUS.PROGRESSING) {
            progressBar.style.display = 'block';
            progressBar.innerHTML = value + '%';
        } else {
            progressBar.style.display = 'none';
        }
    });

    /* ... */
    #progress-bar {
        display: none;
        position: absolute;
        inset: 0;
        text-align: center;
        line-height: 100vh;
        z-index: 9999;
        background: rgba(255, 255, 255, 0.6);
        font-size: 24px;
    }
    /* ... */

#### # Using PDFViewCtrl.viewerui.ProgressComponent

Example1:

    // Create an instance of ProgressComponent at an appropriate time
    let progressComponent = new PDFViewCtrl.viewerui.ProgressComponent();
    progressComponent.show(document.body);
    progressComponent.updateProgress(20, PDFViewCtrl.constants.PROGRESS_STATUS.PROGRESSING);
    // End with success
    // progressComponent.updateProgress(null, PDFViewCtrl.constants.PROGRESS_STATUS.SUCCESS);
    // End with failure
    // progressComponent.updateProgress(null, PDFViewCtrl.constants.PROGRESS_STATUS.FAIL);

Example2:

    // Create an instance of ProgressComponent at an appropriate time
    let progressComponent = new PDFViewCtrl.viewerui.ProgressComponent();
    progressComponent.show(document.body);
    progressComponent.updateProgress({current: 1, total: 4}, PDFViewCtrl.constants.PROGRESS_STATUS.PROGRESSING);
    // End with success
    // progressComponent.updateProgress(null, PDFViewCtrl.constants.PROGRESS_STATUS.SUCCESS);
    // End with failure
    // progressComponent.updateProgress(null, PDFViewCtrl.constants.PROGRESS_STATUS.FAIL);