Custom loaders

While a video loads, ScrollVideo shows a translucent overlay with a progress bar. During an in-browser re-encode, the overlay gives way to a small badge in the corner, because the original video can already be scrolled. Both can be replaced, restyled or removed.

The loading states

Phase	When	Covers the video?
`download`	The file is being fetched	Yes
`preparing`	A quick pass over the timeline before scrubbing starts	Yes
`optimize`	The browser is re-encoding the video	No: corner badge, the original is already scrollable
`error`	The video can’t be loaded or played	Yes, with the error message

With optimize={{ wait: true }}, the optimize phase covers the video too.

Your own loader

Pass a function to loader. It receives the state and the built-in loader for that state, so you can wrap or replace it:

Hero.tsx

<ScrollVideo
  src="/videos/hero.mp4"
  loader={(state, builtIn) =>
    state.background ? builtIn : <p className="loading">Loading {Math.round(state.progress * 100)}%</p>
  }
/>

The state has phase, progress (0 to 1), background (true for the corner badge) and error (in the error phase). Returning null shows nothing for that state.

Other forms:

`loader`	Result
not set	The built-in overlay and badge
a React element	Shown while the video is covered; no badge during a re-encode
a function	Called for every state, including the badge
`false`	Nothing at all

Errors always show their message unless you handle the error phase in a function. onError receives the same error if you’d rather show it elsewhere.

Restyling the built-in one

The built-in loader is plain markup with attributes you can target from CSS:

styles.css

[data-vidscroll-loader] {
  background: rgb(0 0 0 / 0.8);
}

[data-vidscroll-loader][data-background] {
  inset: 16px 16px auto auto;
}

[data-vidscroll-loader][data-phase="download"] {
  font-family: Georgia, serif;
}

The second rule moves the badge to the top-right corner. To keep the overlay but hide the badge, set display: none on [data-vidscroll-loader][data-background].

What’s behind the loader

By default the video’s first frame shows behind the loading overlay. poster shows an image instead, or nothing:

Hero.tsx

<ScrollVideo src="/videos/hero.mp4" poster="/images/hero-poster.jpg" />

Automatic optimization: what the re-encode phase is.
ScrollVideo: the loader and poster props.

The loading states

Your own loader

Restyling the built-in one

What’s behind the loader

Related