How to change loader image

Method 1 : Override the loader image

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

// Define a loader image as JSX
const LoaderImage = (
  <svg
    width="40px"
    height="40px"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 200 200"
  >
    <path
      fill="#F9D423"
      stroke="#F9D423"
      d="m148 84.7 13.8-8-10-17.3-13.8 8a50 50 0 0 0-27.4-15.9v-16h-20v16A50 50 0 0 0 63 67.4l-13.8-8-10 17.3 13.8 8a50 50 0 0 0 0 31.7l-13.8 8 10 17.3 13.8-8a50 50 0 0 0 27.5 15.9v16h20v-16a50 50 0 0 0 27.4-15.9l13.8 8 10-17.3-13.8-8a50 50 0 0 0 0-31.7Zm-47.5 50.8a35 35 0 1 1 0-70 35 35 0 0 1 0 70Z"
    ></path>
  </svg>
);

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPTheme customVariables={{ '--rp-loader-backdrop-color': '#0995EE' }}>
        <RPProvider
          src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf"
          loaderImage={LoaderImage}
        >
          <RPDefaultLayout>
            <RPPages/>
          </RPDefaultLayout>
        </RPProvider>
      </RPTheme>
    </RPConfig>
  )
}

Method 2 : Fully Customize the Progress Loader

Use a custom loader component defined and used in the same file:

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

// Custom loader: reads current loading percentage from context
const Loader = () => {
  // 0-100 progress while the document is loading
  const { loaderProgress } = useDocumentContext();
  // Render a simple inline progress indicator
  return <>Loading... {loaderProgress} % </>;
}

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      {/* Customize loader backdrop color via CSS variable */}
      <RPTheme customVariables={{ '--rp-loader-backdrop-color': '#0995EE' }}>
        <RPProvider
          src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf"
          // Provide the custom loader component
          loaderImage={<Loader/>}
        >
          <RPDefaultLayout>
            <RPPages/>
          </RPDefaultLayout>
        </RPProvider>
      </RPTheme>
    </RPConfig>
  )
}