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


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) {
 } else {
 loadingComponentPromise = openLoadingLayer();
 pdfui.addViewerEventListener(Events.openFileSuccess, function() {
 loadingComponentPromise.then(function(component) {
 pdfui.addViewerEventListener(Events.openFileFailed, () => {
 loadingComponentPromise.then(function(component) {


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 {

.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