<p>There is no straight forward way to show progress % with <code>mgr-pdf-viewer-react</code>. So you have to kind off do your own.</p>

<ul>
<li>Use a <code>ref</code> and attach it to <code>PDF</code> component. The library maintains a state called <code>pages</code> which is set after pdf document is loaded. Read the <code>pages</code> value using the <code>ref</code> and show progress bar until pages has got some value.</li>
</ul>

<p>Use some library for progress bar. I have used <a href="https://github.com/abdennour/react-progressbar" rel="nofollow noreferrer">react-progressbar</a></p>

<p><a href="https://codesandbox.io/s/pdf-loading-placeholder-lb7eh?file=/src/App.js" rel="nofollow noreferrer">Working demo</a></p>

<pre class="lang-js prettyprint-override"><code>import PDFViewer from "mgr-pdf-viewer-react";
import ProgressBar from "react-progressbar";

export default function App() {
  const [currentProgress, setCurrentProgress] = useState(0);

  useEffect(() =&gt; {
    progress();
  }, []);

  const ref = useRef(null);

  const progress = () =&gt; {
    let step = 5; // the smaller this is the slower the progress bar
    let current_progress = 0;
    const interval = setInterval(function() {
      current_progress += step;
      setCurrentProgress(current_progress);
      let progress =
        Math.round((Math.atan(current_progress) / (Math.PI / 2)) * 100 * 1000) /
        1000;

      // console.log(ref.current);
      if (ref.current &amp;&amp; ref.current.state.pages) {
        console.log("cleared");
        current_progress = 100;
        setCurrentProgress(current_progress);
        clearInterval(interval);
      } else if (progress &gt;= 70) {
        step = 0.1;
      }
    }, 100);
  };

  return (
    &lt;div className="App"&gt;
      &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
      &lt;p&gt;{currentProgress + " %"}&lt;/p&gt;
      {&lt;ProgressBar completed={currentProgress} /&gt;}
      &lt;PDFViewer
        ref={ref}
        document={{
          url: "https://arxiv.org/pdf/quant-ph/0410100.pdf"
        }}
        // loader={&lt;h2 style={{ color: "#fa5b35" }}&gt;Custom loader element&lt;/h2&gt;}
        // loader={&lt;ProgressBar completed={currentProgress} /&gt;}
      /&gt;
    &lt;/div&gt;
  );
}

</code></pre>
how to show loading in percent, while loading from src folder
<p>I am working on a pdf reader in my reactJS app. I need to show the loading indicator of a pdf file. My pdf reader only loads once the file is completely loaded. As you can see in <a href="http://balpaathmala.olenepal.org/books/read/c0286efe-adf5-49de-ad89-e94ddbc67a66" rel="nofollow noreferrer">this link</a>.</p>

<p>I think loading the pdf file separately first while showing the loading percent indicator and then only loading the pdf loader component would do the trick. </p>

<p>Also a useState to set loaded state and loaded percent would probably be a good idea to go about it. Please help me implement this and feel free to suggest anything else. </p>

<p>My current code for this is as follows:</p>

<pre><code>import PDFViewer from "mgr-pdf-viewer-react"

function Reader({ bookDetail }) {
    const readerRef = useRef(null)

    return (
        bookDetail !== null &amp;&amp; (
            //  ...
                &lt;PDFViewer
                    page={1}
                    document={{
                        url: bookDetail.bookUrl,
                    }}
                /&gt;
            // ...
        )
    )
}

export default Reader


</code></pre>