<media-loading-indicator>

The <media-loading-indicator> component indicates when the media is buffering. By default, this element is hidden and will only be shown when media loading is stalled.

The component will be updated automatically based on media state and the functionality can be configured.

• The loadingdelay attribute to have the loading indicator wait the provided amount of milliseconds before showing.
• What is being displayed can be configured via the loading slot.

<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-loading-indicator slot="centered-chrome"></media-loading-indicator>
</media-controller>

You can modify the contents of the <media-loading-indicator> component using slots. This is useful if you’d like to use your own custom loading indicator instead of the default one provided by media-chrome.

Here is an example with custom SVGs:

<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-loading-indicator slot="centered-chrome">
    <svg slot="icon" viewBox="-12 -15 48 60">
      <path d="M0 0h4v10H0z">
        <animateTransform
          attributeType="xml"
          attributeName="transform"
          type="translate"
          values="0 0; 0 20; 0 0"
          begin="0"
          dur="0.6s"
          repeatCount="indefinite"
        />
      </path>
      <path d="M10 0h4v10h-4z">
        <animateTransform
          attributeType="xml"
          attributeName="transform"
          type="translate"
          values="0 0; 0 20; 0 0"
          begin="0.2s"
          dur="0.6s"
          repeatCount="indefinite"
        />
      </path>
      <path d="M20 0h4v10h-4z">
        <animateTransform
          attributeType="xml"
          attributeName="transform"
          type="translate"
          values="0 0; 0 20; 0 0"
          begin="0.4s"
          dur="0.6s"
          repeatCount="indefinite"
        />
      </path>
    </svg>
  </media-loading-indicator>
</media-controller>

It’s possible to change how long the loading indicator waits before showing itself when the media state changes to loading.

There are 3 ways of changing the delay: an attribute, a property, or a CSS variable. All values are in milliseconds.

<media-loading-indicator loadingdelay="1000"></media-loading-indicator>

const loadingIndicator = document.querySelector('media-loading-indicator');

loadingIndicator.loadingDelay = 1000;

media-loading-indicator {
 --media-loading-indicator-transition-delay: 1000ms;
}

It’s possible to keep the loading indicator always visible via a CSS variable.

media-loading-indicator {
 --media-loading-indicator-opacity: 1;
}

See the Customize Icons section above for this in action.

The <media-loading-indicator> will be updated with media state attributes depending on the media and playback states.

You can use these attributes to apply custom styles to your <media-loading-indicator>. For example, if the media is loading but you want the indicator to be semi-transparent, you can change the opacity like so:

media-loading-indicator[medialoading]:not([mediapaused]) {
  --media-loading-indicator-opacity: 0.75;
}

The media UI attributes will be set automatically by the controller if they are connected via nesting or the mediacontroller attribute. Only set these attributes manually if you know what you're doing.