The :buffering pseudo-class targets elements that are in a temporary “buffering” state - for example, when a media resource is waiting for network or decode data and cannot continue playback. It’s intended to let authors style an element while that transient state is active: show overlays or skeletons, dim content, disable controls, animate indicators, or change focus/visibility affordances to signal an in-progress wait.

What it represents

• A transient state: styles applied with :buffering should reflect a temporary condition (loading, waiting for enough data) and typically transition away when the element leaves buffering.
• Declarative UX hooks: it’s commonly used to surface a visual indicator (spinner, shimmer) or to reduce interaction while the element is not ready.
• Works well on replaced or composite elements that load external resources - for example, the media element video - and on custom components whose implementation maps internal load state to the pseudo-class.

Styling patterns and accessibility

• Overlay indicator: place an overlay or spinner above the element (often with an absolutely positioned pseudo-element) and fade it in/out.
• Disable interaction: use pointer-events and opacity or visibility to prevent accidental interaction while buffering.
• Smooth transitions: use transition or animation to avoid sudden flashes when buffering starts/stops.
• Communicate to assistive tech: pair visual styles with appropriate ARIA state (for example, aria-busy or an offscreen live region) so screen readers are aware of the busy state.

Common CSS properties to use

• opacity, visibility, pointer-events, transition, animation, background-color, position, z-index, display, transform.

Selectors and composition

• You can combine :buffering with type selectors, attribute selectors or class selectors (for example, a wrapper that both holds media and other controls).
• Pairing with pseudo-elements (e.g., ::after) is a common approach to draw indicators without extra DOM.
• Specificity behaves like any other pseudo-class; rules on the element or more specific selectors will override.

Examples

Simple overlay spinner on a media element

/* container element should be positioned for absolute children */
video:buffering {
  position: relative;
}
/* dark translucent overlay with a CSS spinner in the center */
video:buffering::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  z-index: 10;
  pointer-events: none; /* allow events to pass if you still want them */
}
/* spinner using conic-gradient and animation on the pseudo-element's background */
video:buffering::before {
  content: "";
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
  conic-gradient(#fff 10%, rgba(255,255,255,0.25) 10% 100%);
  animation: spin 1s linear infinite;
  z-index: 11;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

Dim and disable interaction for a wrapper during buffering

[data-buffering] {
  position: relative;
  pointer-events: none;          /* prevent clicks while buffering */
  opacity: 0.6;                  /* visually de-emphasize */
  transition: opacity 200ms ease;
}
[data-buffering] .controls {
  pointer-events: auto;          /* allow specific child controls if needed */
  opacity: 0.8;
}

Lightweight skeleton / shimmer while buffering

[data-buffering] .poster {
  background: linear-gradient(90deg,
    #f0f0f0 0%,
    #e8e8e8 40%,
    #f0f0f0 80%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer {
  100% { background-position: -200% 0; }
}

Guidance and best practices

• Keep animations subtle and performant: prefer transforms, opacity and composited properties to avoid layout thrashing.
• Avoid blocking keyboard focus unless you explicitly manage focus - instead, announce the busy state via ARIA so assistive users know what’s happening.
• Design a graceful fallback for environments that don’t support the pseudo-class by using attribute- or class-based fallbacks (for JS-driven components you might toggle a data attribute like data-buffering).
• Use layering (position/z-index) carefully so the buffering indicator does not obscure critical controls you want users to access.

By using :buffering as a styling hook you can provide clear, accessible, and smooth visual feedback during transient loading states without extra DOM markup in many common cases.