:buffering CSS Pseudo Class
Description
The CSS :buffering pseudo-class selector represents a playable element, such as <audio> or <video>, when that element is buffering a media resource. An element is considered as buffering when that element cannot continue playing because it is trying to load media data but does not yet have enough data to begin or continue playback.
For example, the following CSS code would style a video element with a blue border when it is buffering:
video:buffering {
border: 5px solid blue;
}
This could be used to provide a visual indication to the user that the video is still loading and that they may need to wait a few moments before it can start playing.
Note that an element is still considered to be
:playing when it is buffering. If :buffering matches an element, :playing will also match that element. This is because buffering is a temporary state that a playing element can enter while it is loading more data.The
:buffering pseudo-class is not currently supported by all browsers, but it is supported by most modern browsers. It is still a working draft specification, so it is possible that the browser support for this pseudo-class could change in the future.
Syntax
:buffering {
/* ... */
}
Example
No example, click CSS tab to see example code.:buffering {
outline: 5px solid red;
}
video:buffering {
outline: 5px solid blue;
}Browser Support
The following table will show you the current browser support for the CSS :buffering pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| x | x | x | x | 15.4 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| x | x | x | 15.4 | x | x |
Last updated by CSSPortal on: 1st October 2023