Skip to main content
BufferingIndicator shows a loading indicator when the media is waiting to buffer and not paused, but only after a configurable delay (default 500ms). This delay prevents the indicator from flickering during brief stalls. The indicator hides immediately when buffering ends.
Requires the playback feature to be registered with the player.

​
Import

import { BufferingIndicator } from '@videojs/react';

​
Basic Usage

import { BufferingIndicator } from '@videojs/react';

function Player() {
  return (
    <div className="player-container">
      {/* ... video element ... */}
      <BufferingIndicator className="spinner" />
    </div>
  );
}

​
Custom Render

import { BufferingIndicator } from '@videojs/react';
import { Spinner } from './icons';

function Player() {
  return (
    <BufferingIndicator
      render={(props, state) => (
        <div {...props}>
          {state.visible && <Spinner />}
        </div>
      )}
    />
  );
}

​
Props

​
delay
number
Milliseconds to wait before showing the indicator. Defaults to 500. Set to 0 to show immediately.
​
render
ReactElement | ((props: HTMLProps, state: BufferingIndicator.State) => ReactElement | null)
Custom render prop. Receives the computed HTML props and current state.
​
className
string | ((state: BufferingIndicator.State) => string)
CSS class name or a function that receives state and returns a class name.
​
style
CSSProperties | ((state: BufferingIndicator.State) => CSSProperties)
Inline style or a function that receives state and returns a style object.

​
State Data Attributes

AttributeDescription
data-visiblePresent when the buffering indicator should be displayed (after the delay has elapsed).

​
CSS Styling Example

/* Hidden by default */
.spinner {
  display: none;
}

/* Show when buffering */
.spinner[data-visible] {
  display: block;
}

Build docs developers (and LLMs) love

Get started for freeTalk to us