1. Display
  2. Buffering Indicator


Buffering Indicator

This page showcases how to create a loading indicator for when media has paused due to a lack of data.


We don't provide a buffering indicator component out of the box because you can easily create one with some HTML, CSS, and media attributes.

The waiting attribute can be used to show the indicator while media is buffering. Optionally, the can-play attribute could also be used to display the indicator while media is initially loading.

        /* Show buffering indicator while media is not ready, or buffering. */
media-player:not([can-play]) .buffering-icon,
media-player[waiting] .buffering-icon {
  opacity: 1;



In the following example, we put together a conventional buffering spinner, and position it at the center of the player: