How can I add a spinner or a loader after performing annotations on pdf?

PDF.js Express Version

Detailed description of issue
Need to add a spinner/loader on loading annotations or loading pdf into the viewer. Tried using ngx spinner but it will not working inside Webviewer. Any help would be appreciated . Thanks !

Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
{Answer here}

Link to document
{Provide a link to the document in question if possible}

Code snippet
{Provide a relevant code snippet}

Hi there,

You can use the openElements and closeElements APIs to show and hide the built in loading spinner:


    setTimeout(() => {
    }, 1000)

For example, if you wanted to display the loading spinner while annotations are loading from your server, you could do something like this:

    initialDoc: 'mydoc.pdf'
}, ele).then(instance => {
   instance.docViewer.on('documentLoaded', async () => {
       const xfdf = await loadAnnotsFromMyServer();
      'annotationsLoaded', () => {


Hey Logan,

Thanks a lot for the suggestion . It worked well for me. But is there a progress spinner also available which can be shown while the pdf is loaded into the viewer. For large pdf files viewer takes a while to load.


You can use the built in progress spinner for anything you want. You can use a variety of WebViewer events to time when it should be on or off.

For events related to document loaded, take a look at the docViewer events.