# 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.

https://webviewer-demo.foxit.com/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.

https://webviewer-demo.foxit.com/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.

https://webviewer-demo.foxit.com/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:

PDFDoc.sign
PDFDoc.addWatermark
Action: Run Form Recognition on the UI
PDFViewer.print
PDFViewer.printEx
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);

← ViewerUI Collaboration →