Skip to main content
Version: 5.x

vm-loading-screen

The view that is displayed while the player is booting or media is loading. By default there are animated dots that are shown below the <slot /> to indicate to the user content is being loaded. The default <slot /> is your opportunity to brand the player with your logo.

Usage#

<vm-player>  <!-- ... -->  <vm-ui>    <!-- ... -->    <vm-loading-screen>      <!-- Pass in content here such as a logo (optional). -->    </vm-loading-screen>  </vm-ui></vm-player>

Properties#

PropertyDescriptionTypeDefault
hideDotsWhether the loading dots are hidden or not.booleanfalse

Slots#

SlotDescription
Used to pass in any content to be shown above the animated dots while the player is booting or media is loading. Use this as an opportunity to brand your player, similar to how Netflix shows their logo when content is loading.

CSS Custom Properties#

NameDescription
--vm-loading-screen-dot-colorThe color of the animated loading dot.
--vm-loading-screen-dot-sizeThe size (wxh) of the dot in pixels.
--vm-loading-screen-pulse-durationThe length of the pulse animation to complete one cycle.
--vm-loading-screen-z-indexThe position in the UI z-axis stack inside the player.

Dependencies#

Used by#