Customize thumbnail spinners

By default, the thumbnail plugin uses the `Spinner` component provided by the `@react-pdf-viewer/core` package as the default loading indicator when
If you would like to change that spinner, then you can use the `renderSpinner` option. It is a function that returns a React component:
const thumbnailPluginInstance = thumbnailPlugin({
renderSpinner: () => {
// Your own loading indicator
For example, let's create a loading indicator which is a single `div` element with a simple animation:
@keyframes square-spinner {
25% {
transform: rotateX(180deg) rotateY(0);
50% {
transform: rotateX(180deg) rotateY(180deg);
75% {
transform: rotateX(0) rotateY(180deg);
100% {
transform: rotateX(0) rotateY(0);
.square-spinner {
background-color: rgba(0, 0, 0, 0.2);
width: 2rem;
height: 2rem;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: square-spinner;
The default `Spinner` can be replaced with the new indicator as
const thumbnailPluginInstance = thumbnailPlugin({
renderSpinner: () => <div className="square-spinner" />,
In the live demo below, you can scroll the thumbnails area to see how the loading indicators are displayed.
The document used in the example belongs to this site

See also