<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 is-loading></media-loading-indicator>

Alternate content

<media-loading-indicator is-loading>
  <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>

Attributes

Name	Type	Default Value	Description
`loading-delay`	`number`	`500`	The amount of time in ms the media has to be buffering before the loading indicator is shown.

Slots

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

Styling

See our styling docs