How to Change the Loading Icon & Text with PDF SDK for Web

Foxit PDF SDK for Web comes with lots of customization options and you can now edit the loading icon and text. This icon/text refers to the time between UI initialization and document display. Follow the guidelines below to update this icon and text, or you can have neither a loading icon/text if you wish.

Code Snippet:

function openLoadingLayer() {
 // The comment section can specify the position of the mask layer
 // return pdfui.getRootComponent()
 // .then(function(root) {
 // return root.getComponentByName('pdf-viewer')
 // }) .then(function(viewerComponent) {
 // return pdfui.loading(viewerComponent.element);
 // });
 return pdfui.loading();
 }
 let loadingComponentPromise = openLoadingLayer();

 pdfui.addViewerEventListener(Events.beforeOpenFile, function() {
 if(loadingComponentPromise) {
 loadingComponentPromise = loadingComponentPromise
 .then(function(component) {
 component.close();
 })
 .then(openLoadingLayer);
 } else {
 loadingComponentPromise = openLoadingLayer();
 }
 });
 pdfui.addViewerEventListener(Events.openFileSuccess, function() {
 loadingComponentPromise.then(function(component) {
 component.close();
 });
 });
 pdfui.addViewerEventListener(Events.openFileFailed, () => {
 loadingComponentPromise.then(function(component) {
 component.close();
 });
 });

Without specifying the mask layer position, the entire application will be masked, as shown below:

You can replace this with your preferred icon as shown below:

The corresponding CSS should look like this:

.fv__ui-loading-layer .fv__ui-loading-svg {

display: inline-block;
*display: inline;
*zoom: 1;
font-size: 16px;
width: 5em;
height: 5em;
background-image: url(...);
background-repeat: no-repeat;
background-position: 50%;
background-size: 100%;

}

When you’re done, it should look something like this: