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

**URL:** <https://pdfjs.community/t/how-can-i-add-a-spinner-or-a-loader-after-performing-annotations-on-pdf/377>\
**Category:** Technical Support\
**Created:** [November 2, 2020, 2:40pm UTC](https://pdfjs.community/t/how-can-i-add-a-spinner-or-a-loader-after-performing-annotations-on-pdf/377 "2020-11-02T14:40:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![himani.sharma](https://avatars.discourse-cdn.com/v4/letter/h/e47774/32.png) [@himani.sharma](https://pdfjs.community/u/himani.sharma)\
**Post date:** [November 2, 2020, 2:40pm UTC](https://pdfjs.community/t/how-can-i-add-a-spinner-or-a-loader-after-performing-annotations-on-pdf/377/1 "2020-11-02T14:40:43Z")

</div>

**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}

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [November 2, 2020, 5:10pm UTC](https://pdfjs.community/t/how-can-i-add-a-spinner-or-a-loader-after-performing-annotations-on-pdf/377/2 "2020-11-02T17:10:37Z")

</div>

Hi there,

You can use the [openElements](https://pdfjs.express/api/WebViewerInstance.html#openElements__anchor) and [closeElements](https://pdfjs.express/api/WebViewerInstance.html#closeElements__anchor) APIs to show and hide the built in loading spinner:

```javascript
    instance.openElements(['loadingModal']);

    setTimeout(() => {
      instance.closeElements(['loadingModal']);
    }, 1000)

```

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

```javascript
WebViewer({
    initialDoc: 'mydoc.pdf'
}, ele).then(instance => {
 
   instance.docViewer.on('documentLoaded', async () => {
       instance.openElements(['loadingModal']);
       const xfdf = await loadAnnotsFromMyServer();
       instance.annotManager.importAnnotations(xfdf);
        
       instance.docViewer.one('annotationsLoaded', () => {
           instance.closeElements(['loadingModal']);
       })
   })
})

```

Thanks!  
Logan

---

<div class="post-metadata">

**Author:** ![himani.sharma](https://avatars.discourse-cdn.com/v4/letter/h/e47774/32.png) [@himani.sharma](https://pdfjs.community/u/himani.sharma)\
**Post date:** [November 3, 2020, 9:23am UTC](https://pdfjs.community/t/how-can-i-add-a-spinner-or-a-loader-after-performing-annotations-on-pdf/377/3 "2020-11-03T09:23:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [November 4, 2020, 3:26pm UTC](https://pdfjs.community/t/how-can-i-add-a-spinner-or-a-loader-after-performing-annotations-on-pdf/377/4 "2020-11-04T15:26:35Z")

</div>

Hi,

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](https://pdfjs.express/api/CoreControls.DocumentViewer.html#toc99__anchor).

Thanks,  
Logan