1. Home
  2. Foxit PDF SDK for Web
  3. How to Change the Loading Icon & Text with PDF SDK for Web

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

Contents

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:

 

element.style {

}
UIExtension.css:1
.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(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5…AuMiAwLjggMC40IDAuOCIgY2FsY01vZGU9InNwbGluZSIgLz4KICA8L3BhdGg+Cjwvc3ZnPgo=);
background-repeat: no-repeat;
background-position: 50%;
background-size: 100%;

}

 

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

 

Updated on September 8, 2020

Was this article helpful?

Related Articles

Ready to try Foxit PDF SDK?
Click the link below to download your trial
Free Trial