<media-loading-indicator>

Shows a loading indicator when the media is buffering.

Default (hidden by default, media is not buffering)

<media-loading-indicator></media-loading-indicator>

Is loading (media is buffering)

<media-loading-indicator isloading></media-loading-indicator>

Alternate content

<media-loading-indicator isloading>
  <svg slot="loading" 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>

Reference

Slots

Name	Description
`loading`	The element shown for when the media is in a buffering state.

Attributes

Name	Type	Description
`loadingdelay`	`string`	Set the delay in ms before the loading animation is shown.
`mediacontroller`	`string`	The element `id` of the media controller to connect to (if not nested within).

Media UI Attributes

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.

Name	Type	Description
`mediapaused`	`boolean`	Present if the media is paused.
`medialoading`	`boolean`	Present if the media is loading.

CSS Variables

Name	Default	Description
`--media-primary-color`	`rgb(238 238 238)`	Default color of text and icon.
`--media-icon-color`	`var(--media-primary-color, rgb(238 238 238))`	`fill` color of button icon.
`--media-control-display`	`var(--media-loading-indicator-display, inline-block)`	`display` property of control.
`--media-loading-indicator-display`	`inline-block`	`display` property of loading indicator.
`--media-loading-icon-width`	`100px`	`width` of loading icon.
`--media-loading-icon-height`		`height` of loading icon.