Show loading indicator with PDFObject

Question

I need to show some sort of indicator while the PDF is loading. I'm displaying PDFs that can take 40 seconds or longer to be generated and embedded.

I'm aware that I can check to see if the PDFObject embedded successfully (by using this example). However, this doesn't give an indication when the file finished downloading.

I'm also aware that I can style it. However, that doesn't work either, since it retains that style after the PDF loaded. Also, while I can style the border, positioning, height, etc of the object, I can't get attributes like cursor to work:

#pdf object {
  border: 5px solid red;       // does work, but still shows up after the PDF loads
  cursor: progress !important; // doesn't work
}

Is there any way I can see when the file successfully downloaded?

Answer 1

Unfortunately, PDF readers (including the native ones and 3rd party like Adobe Reader) do not provide load percentage details. PDFObject has no way of knowing how large the file is, or how much longer it will take to load the file.

Answer 2

I know this is still a old post but if you still looking for a solution. you can try to make a <div> position relative and then the spinner inside the div absolute with z-index of 99 and then the pdfobject also with a position relative and z-index 99 that way the pdfobject will go on top of the spinner than is looks like the pdf is loaded.

div.container {
width: 100%;
height: 100%;
display: block;
position: relative; }

#spinner {
position: absolute;
z-index: 99; }

#pdf-container {
width: 100%; /* optional */
margin: 0 auto; /* optional */
border-bottom: 1px solid #666; /* optional */
position: absolute;
z-index: 99; }