Display

Buffering Indicator

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

# Usage

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

The data-waiting attribute can be used to show the indicator while media is buffering. Optionally, the data-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([data-can-play]) .buffering-icon,
media-player[data-waiting] .buffering-icon {
  opacity: 1;
}

      

# Styling

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

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
		    

# Tailwind

The styling example above built with Tailwind: