Scenario

A loader progress from 0 to 100% replaces the default loader image across the library:

1. When the Viewer starts loading, the library displays the loader progress.
2. When a PDF document starts loading, the loader progress is displayed on the layout.
3. When a PDF page starts loading, the loader progress is displayed on the page.

What to Use

Below are the props from the RPProvider component used to implement this feature.

Prop	Objective
loaderImage	Provide a fully custom loader element to display while the PDF document is loading. Replaces the default loading animation.
customVariables	Allow overriding theme CSS variables such as loader backdrop color or sizing to visually match the custom loader with your application’s design system.

The useDocumentContext provides access to the PDF’s state, including its loading progress and document details, allowing you to build components that react to the PDF as it loads.

Here are the functions we’re using for this example

Name	Objective
useDocumentContext	Access PDF document state
loaderProgress	Track loading progress of the PDF

1. Create a Custom Loader Component

import { useDocumentContext } from '@pdf-viewer/react'

export const Loader = () => {
  const { loaderProgress } = useDocumentContext();
  return <>Loading... {loaderProgress} % </>
}

2. Import and Use the Custom Loader in Your Viewer

import {
  RPProvider,
  RPDefaultLayout,
  RPPages,
  RPConfig,
  RPTheme
} from '@pdf-viewer/react'
import { Loader } from './components/Loader'

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPTheme customVariables={{ '--rp-loader-backdrop-color': '#0995EE' }}>
        <RPProvider
          src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09-test.pdf"
          loaderImage={<Loader/>}
        >
          <RPDefaultLayout>
            <RPPages/>
          </RPDefaultLayout>
        </RPProvider>
      </RPTheme>
    </RPConfig>
  )
}